ブログのＷ３Ｃ（ＣＳＳ）チェック！
Updated:
昨日、自分の ブログページ のＷ３Ｃチェックを行いましたが、今日はＷ３ＣのＣＳＳの方をチェックしてみました。
エラーは意外と少なく１０個ほどでした。
エラーの内容は、ほとんどがケアレスミスでしたが、他にクロスブラウザ対応の記述部分がエラーになってました。
ＩＥ用の記述部分ですが、ＩＥってかなりのくせものですな～。 Ｗ３Ｃへの対応が遅れているそうな。
普段、自分はＩＥなんて使わないから、あまり意識してなかったけど、、、 時々、もしやと思ってＩＥで表示を確認してみるとやっぱりおかしいってことが非常に多すぎる！
僕が思うに数々のブラウザの中でも一番やっかいじゃないんかな！？
ま、そんなこんなで何とかＷ３Ｃ（ＣＳＳ）チェックもＯＫになったんで、めでたし。
ちなみにＩＥ対応するのに結構ググって調べて以下のように修正しました。 （正確かどうかは不安だが、とりあえずチェックが通ったんで。。。） ↓↓修正前↓↓
``` 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; 」の部分がＷ３Ｃ（ＣＳＳ）でエラーになります。
↓↓修正後↓↓
``` 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 {} 」を付けると、ＩＥ（７以前）に対応できるみたい。
※ちなみにこちら（ 小粋空間:IE7 の CSS ハック ）を参考にさせてもらいました。
これで、このバナーを貼れます。
（当ブログの右下参照！）
※当方では以下のブラウザで動作確認しています。
- FireFox3.0.6
- Opera9.63
- InternetExplorer6.0
・ＩＥ７では試してませんので、あしからず。。。
じゃあまた！
Comments