2007年8月23日

CSSの不思議!?

#wrapper{
margin:0 auto;
}

と設定してなにかの原因でIE6だけ中央寄せにできなくて左に寄っちゃって困ったなーと思ったら

body{
text-align:center;
}
#wrapper{
margin:0 auto;
text-align:left;
}

にしたらFirefox,IE7,IE6ともに中央寄せになったから良かった~と思ったけど
普通はwrapperにmargin:0 auto;だけでいけると思ったのになんでかなー
まぁいいか問題は解決したしね。

floatとmarginを一緒に使ってしまうとmarginが2倍になってしまうIE6のバグでも説明しちゃいますかね。

【例1】
#cat{
float:left;
margin:5px;
}

だとmarginが2倍の10pxとしてIE6では表示されてしまうけど

【例2】
#cat{
float:left;
margin:5px;
display:inline;
}

というようにdisplay:inlineをつけるとIE6でも5pxとして表示してくれます。
まぁ知ってる人はしっているメジャーなcssハックですね。
これだとエラーもはかれないし、ただたまにpaddingとかと一緒にかけるとバグったりします。

ご参考まで 

日時: 2007年8月23日 01:11 |

今が旬なお勧めサイトのご紹介!!

富貴蘭の事ならシード園芸

FX情報