ブログのW3C(CSS)チェック!

Updated:


※この記事は15年以上前に投稿されたもので、情報が古い可能性があります。

   昨日、自分の ブログページ のW3Cチェックを行いましたが、今日はW3CCSSの方をチェックしてみました。

エラーは意外と少なく10個ほどでした。

エラーの内容は、ほとんどがケアレスミスでしたが、他にクロスブラウザ対応の記述部分がエラーになってました。

IE用の記述部分ですが、IEってかなりのくせものですな~。 W3Cへの対応が遅れているそうな。

普段、自分はIEなんて使わないから、あまり意識してなかったけど、、、 時々、もしやと思ってIEで表示を確認してみるとやっぱりおかしいってことが非常に多すぎる!

僕が思うに数々のブラウザの中でも一番やっかいじゃないんかな!?

ま、そんなこんなで何とかW3C(CSS)チェックもOKになったんで、めでたし。

ちなみにIE対応するのに結構ググって調べて以下のように修正しました。 (正確かどうかは不安だが、とりあえずチェックが通ったんで。。。) ↓↓修正前↓↓

``` css div.post table.code pre.code { margin: 0px; border: groove 1px #808080; background-color: #333333; padding: 10px; font-size: 1em; line-height: 1.4em; overflow: auto; overflow-y: hidden; _width: 90%; /* for IE4 - IE6 */ *padding-bottom: 25px; /* for IE? - IE7 */ color: #FFFFFF; } ```

このままだと、 「 overflow-y: hidden; 」、「 _width: 90%; 」、「 *padding-bottom: 25px; 」の部分がW3C(CSS)でエラーになります。

↓↓修正後↓↓

``` css div.post table.code pre.code { margin: 0px; border: groove 1px #808080; background-color: #333333; padding: 10px; font-size: 1em; line-height: 1.4em; overflow: scroll; color: #FFFFFF; } /* for IE? - IE7 */ *:first-child+html {} * html {} div.post table.code pre.code { width: 90%; padding-bottom: 25px; } ```

「 *:first-child+html {} * html {} 」を付けると、IE(7以前)に対応できるみたい。

※ちなみにこちら( 小粋空間:IE7 の CSS ハック )を参考にさせてもらいました。

これで、このバナーを貼れます。

正当なCSSです!

(当ブログの右下参照!)

※当方では以下のブラウザで動作確認しています。

  • FireFox3.0.6
  • Opera9.63
  • InternetExplorer6.0

・IE7では試してませんので、あしからず。。。

   じゃあまた!





 

Sponsored Link

 

Comments