- ベストアンサー
Google Chrome用CSSハックについて
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
フォントサイズを0pxにしても意味ありませんよ。 置換する内容が問題なのであって、cssの記述を変えたからといって意味がありません。 text-indent:-9999px;がスパム扱いされるのではなく、置き換える文字と画像が等価で無い場合にスパム扱いされます。
その他の回答 (2)
- naokita
- ベストアンサー率57% (1008/1745)
text-indent:-9999px;がスパムなのではなく、 テキストの内容と画像が一致しないのがおかしいでしょって事。 普通に考えて text-indent:-9999px;よりも、0pxフォントの方が隠しテキストでしょうが。
- yyr446
- ベストアンサー率65% (870/1330)
display: none; じゃだめなの 文字より小さいboxに入れて overflow:hidden; で隠すとか。
お礼
お返事遅くなり大変申し訳ございません。 そのような手法もあるんですね！考えもつきませんでした。ありがとうございます。
関連するQ&A
- cssハックについて
現在Safariに対してcssハックを適用させようとしているのですが、 そのハックがなぜか他ブラウザにまで影響してしまいます… （Firefox、Operaなど。IEは大丈夫です） なぜ他ブラウザにまで影響してしまうのかが判らないので、 教えて頂けると嬉しいです。 宜しくお願いします。 htmlに対するcss読み込みの記述--------- <link rel="stylesheet" type="text/css" href="css/importtop.css" /> importtop.css内の記述--------- /* For Specific Browsers */ @import "safari.css"; safari.css内の記述--------------- /* Safari4 */ body:first-of-type #content { height: 635px; } body:first-of-type #container { height: 635px; } body:first-of-type #sidebar { height: 635px; } body:first-of-type #content { height: 635px; } body:first-of-type .sbar { height: 635px; } /* Safari3 */ html:not(:only-child:only-child) #container { height: 635px; } html:not(:only-child:only-child) #content { height: 635px; } html:not(:only-child:only-child) #sidebar { height: 635px; } html:not(:only-child:only-child) .sbar { height: 635px; }
- 締切済み
- CSS
- CSSハックの使い方を教えてください
CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか？ 実際の記述方法を教えていただけないでしょうか？ 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか？ #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }
- ベストアンサー
- HTML
- このCSSハックはどういう意味合いのものでしょうか？
すみません、似たような質問を。 http://oshiete1.goo.ne.jp/qa4177163.html でして、締め切ってしまったのですが、よく見ると１００％は理解できませんです。 そして、その質問と同じ構造のCSSなのですが・・・。 以下は、どのようなCSS-hackなのでしょうか？ ==知っていること========================================= ●スターハック： セレクタの前に【* html】をつける。（半角スペースも忘れずに） IE4～6、MacIE4～5以下にのみ適用させる。Validator（※仕様に準拠しているかチェックしてくれるもの）に通る。 ⇒2行目はこれを用いている ●（名称不明） プロパティに続けて半角スペースと/**/を入れるとIE6には適用されない。 Validatorに通る。 ⇒５行目のこれは、このハックに該当するのでしょうか？ それとも、プロパティ（1px）のあとに「;」と「改行」と「}」と「もういっかい改行」があるので、該当しないのでしょうか？ 該当しないとしたら、なんのためにあるのでしょうか？ ========================================================= ★それから疑問が１つあります 1行目の「/*\*/」はどのような意味なのでしょうか？ これも、css ハックの一部なのでしゅうか？ 以上、よろしくお願いいたします。 ------------------------------------------------------------- （以下、説明しかすいようにと行番号をふっています） 1: /*\*/ 2: * html .container, * html .minwidth, * html .box { 3: height: 1px; 4: } 5: /**/
- ベストアンサー
- HTML
- cssハックについて質問です。
IE6～IE8以外のcssハックが :root *> #help_me { color: red; } この様になっていたのですがどのように使えばいいのでしょうか。 現在適用しているcss .hoge { margin:15px 0 0 0; } このhogeにIEのみ margin:20px 0 0 0; にしたいのですが :root *> #help_me { color: red; } hogeに対するこれの使い方が全く分かりません。 使い方を教えて下さい。 もしくは、 #help_me { color: blue\9; } （※この場合はcolor:blueは分かるのですが9とは一体何でしょうか） こちらでも大丈夫です。 よろしくお願いします。
- ベストアンサー
- CSS
- cssについて、困っております。
DWでHTMLとCSSの練習としてHPを作成しているのですが、 CSSのスタイルが適用されず、思うようなデザインに出来ず困っております。 例でいうと <div id="main"> <p>～～～～～～～</p> <p>～～～～～～<br /></p> </div> ⬆に対し #main { margin-left:340px; font-size:18px; text-align:center; height:auto; width:600px; { などを指定しているのですが、font-size,text-alignだけが適用され、 その他のmargin,height,width,などが 「(プロパティ名)～は継承されていないため選択範囲に適用されません。外側のタグに適用されます。」 と表示され、適用されません。 この場合はどこに問題があって適用されないのでしょうか？？ また、「外側のタグに適用されます。」というのはどの外側の部分に適用されるのでしょうか？？ 初歩的な質問で申し訳ございません。 回答お願い致します。
- 締切済み
- CSS
- かなり困ってます！CSSが適用されません…
WindowsXPでDreamweaverMXを使っています。 body {font-size: 12px;} .px10 {font-size: 10px;} という内容の外部スタイル「css.css」を作り、テンプレートに「css.css」を適用しました テンプレートを元にページをつくり、部分的に <td class="px10">文字列</td> といった感じで適用しました。 Dreamweaver上ではちゃんと適用されているのですが、ブラウザでみてみると文字が小さくなっていません。 bodyの12pxはブラウザ上でもちゃんと適用されています。 何がいけないのか、わかりません。どなたか解かるかたがいたらお知恵をかしてください。
- ベストアンサー
- HTML
- cssハックでIE9にも対応させるには？
CSSでFirefox,chorme,IEなどブラウザ間で色を統一させたく、 下記のようなcssハックを使いました。 IE6,7,8ではちゃんと反映されましたが、IE9では反映されませんでした。 IE9でも反映させるためには、どのようにしたら良いでしょうか？ <!--[if IE ]> <style type="text/css"> #ie_color {background-color: #777777;} </style> <![endif]-->
- 締切済み
- CSS
- IE8でCSSハックが効かないです。
IE8でCSSハックが効かないです。 IE8のCSSハックを使用したくて、下記のように指定したのですが、 IE8で見るとIE8用に記述したCSSハックが効かないです。 ちなみにIE6用のハックとデフォルトで指定したクラスはきちんと表示されます。 記述方法が原因なのでしょうか。それとも他に原因があるのでしょうか。 教えて欲しいです。 ■サンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="keywords" content="キーワード1,キーワード2"> <meta name="description" content="ディスプリクション"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #main_contents p.test_style { font-weight: bold; color: #000; } /* IE6対策 */ *html #main_contents p.test_style { font-weight: bold; color: #ff0000; } /* IE8対策 */ html>/**/body #main_contents p.test_style { font-weight /*\**/: bold\9; color: #0033ff\9; } </style> <title>IE8表示テスト</title> </head> <body> <div id="main_contents" class="reset"> <p class="test_style">デフォルトのテキスト 黒で表示されます。</p> <p class="test_style">IE6用(css hack)のテキスト IE6で見ると赤で表示されます。</p> <p class="test_style">IE8用(css hack)のテキスト IE8で見ると青で表示されます。</p> <!--/main_contents--></div> </body> </html>
- 締切済み
- HTML
- cssを作成したい初心者です☆
こんにちわ☆ ホームページを作成したい初心者です。htmlをある程度学ぶことができ、今度はcssに超背印してみようと思うようになりました。 そこで、htmlにCSSが反映されるように、テキストエディットに <link rel="stylesheet=" href="style.css">を書きました。CSSの方は、 h1, h2{ font-size: 30px; } h1{ text-align: left; } h2{ text-align: center; } を入力して、h2の文字の位置がブラウザ上で真ん中になるようにしたいのですが、確認したところ、思ったように反映されていなくて困っています。CSSの保存名は「style.css」にして拡張子もCSSにしたのですが・・・。 どのようにすればCSSで作ったものが反映されるようになるのか、教えてくださいっ。
- 締切済み
- HTML
- Google Chromeでの表示フォントについて
Web制作の仕事をしているのですが、cssでフォント指定しているのにも関わらず、急にGoogle Chromeでの表示フォントがデフォルトに戻ってしまいました。 数日前までは、cssで指定しているフォントで表示されていました。 また、IEやFirefox、他のPCではこの現象は起きていません。 Google Chromeの問題だと思い、アンインストール等試してみましたが、改善されません。 どなたか修復方法をご存知でしたらよろしくお願いいたします。
- ベストアンサー
- Windows 7
お礼
お返事遅くなり大変申し訳ございません。 >text-indent:-9999px;がスパム扱いされるのではなく、置き換える文字と画像が等価で無い場 >合にスパム扱いされます。 あ、そういうことなんですね！勉強になりました。ありがとうございます。