IE6でCSSの一部の記述をを読み込まない

Question

IE6でCSSの一部の記述を読み込まないので、困っています。上位のIEやモダンブラウザーでは出ない症状です。解決策の判る方に、お助けをお願いします。外部CSSに書いた内容で、反映するものと反映しないものがあります。 div#main { } とかはOKで、p.small { } 、td.com { } などの classに書いたものが、効きません。他にも、h2 { } 等も効きません。 IE6は、CSSのコメントを閉じる前に全角文字があるとエラーになるとか、 HTMLとCSSの文字コードが違うとエラーとか、ありました。該当はしていません。 classを複数並列記載するとエラーなど、Googleで探したら、ありましたが、そのようなな複雑なことはやっていません。他に、IE6がCSSの一部の記述を読み込まないエラーの原因となるものは、あるのでしょうか。一部の内容です。 CSS========== @charset "UTF-8"; 以下、略 HTML========== 以下、略思い当たる原因として、の上に、wrapper を以下のように定義して、センター配置しています。 div#wrapper { width:800px; 　　　 height:100%; 　　　 position:absolute; 　　　 top:15px;left: 50%; 　　　 margin-left: -400px; background-color: transparent; margin-bottom:0px; } この子要素や孫要素に、コンテンツが書かれています。孫要素は、float している場合もあります。そのような構造では、本題のエラーが出るものなのでしょうか？お助け願います。

ORUKA1951 · Accepted Answer

IE7以上できちんと適用されるならIEは無視して構わないとは思います。
　マイクロソフト自身が「腐った牛乳」と使用して撲滅キャンペーンを張っているくらいです。
マイクロソフト、IE6 撲滅に向けた一大キャンペーン始める | スラッシュドット・ジャパン IT ( http://it.slashdot.jp/story/11/03/07/2037203/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%BD%E3%83%95%E3%83%88%E3%80%81IE6-%E6%92%B2%E6%BB%85%E3%81%AB%E5%90%91%E3%81%91%E3%81%9F%E4%B8%80%E5%A4%A7%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%9A%E3%83%BC%E3%83%B3%E5%A7%8B%E3%82%81%E3%82%8B )

まず、スタイルシートの順番を変えると適用されたりされなかったりするのでしたら、それでどの部分以降が読まれていないかチェックできます。
　また、子孫セレクタを解釈しない部分がありますから、間に全称セレクタを入れてみるとかします。
　一意セレクタで記述したスタイルに対して、複数クラス指定しても二つ目以降は利きません。
p.small { } 、td.com { } 
は、
p small { } 、td span.com { }
と指定できるようにHTMLを書き換えます。

これはＩＥ６のバグですが、HTMLをきちんと記述することで回避できるはずです。

＞これは、800pxワイドのwrapper　をセンター配置させるCSSです。
　まともなブラウザでしたら
　width:800px;margin:0;auto;
　なのですが、IE6でしたら
　body{text-align:center;}
　#wraper{width:800px;}
　#wraper *{text-align:left;}
ですかね。

私は、この点についてはIE6は無視しています。左に偏って表示されても問題ないですから、それよりも、スマホや幅広ディスプレイに対応させるため
 div.article{width:80%;min-width:640px;max-width:800px;margin:0 auto;}
です。

IE６への対応に使う労力がもったいない。
最近では、数字にも上がってこない
日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより） ( http://lhsp.s206.xrea.com/misc/browser-share-version.html )

ORUKA1951 · Answer

まずHTMLの文法チェック、ついでCSSの文法チェックをしてください。

The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )

なお、細かい部分ですが、HTMLの場合
<link rel="stylesheet" href="base.css" type="text/css" />
ではなくて
<link rel="stylesheet" href="base.css" type="text/css">
です。
　left:50%;
　margin-left:-400px;
とはなに？？

IE6でCSSの一部の記述をを読み込まない

IE7以上できちんと適用されるならIEは無視して構わないとは思います。

まずHTMLの文法チェック、ついでCSSの文法チェックをしてください。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング