コーディングでハマる罠っていうのは大体同じようなことだと思います。
まぁ95%以上の確率で、コーディング時の問題はIE6、IE7、IE8で起こると思います。
今回はコーダー最大の敵、というかコーダーおよびJavascriptプログラマー曰く「ほんと消えてなくなってほしい」代表のIE6くんの基本的な対策を紹介します。
●loat要素のmargin2倍問題
IE6ではfloatを指定した要素にmarginも指定すると、そのmarginの値は2倍で表示されます。これを防ぐにはdisplay:inline;を指定する
.sample{
float:left;
margin-top:100px;
display:inline;
}
●min-height問題
IE6はmin-heightが反映されません。しかし、IE6は要素の大きさが親要素よりも大きいと自動で親要素も大きくしてしまうので、単純にheightだけを指定すればOK。
.sample{
min-height:500px;
height:500px; //heightの前に半角スペースがあるので、IE6だけに反映される
}
●position:relative問題
IE6ではposition:relativeをそのまま指定するとダメ。どうだめになるのかは未検証ですが、zoom:1;を追加するようにしましょう。
.sample{
position:relative;
zoom:1;
}
●ネガティブマージン問題
marginをマイナスで指定すると、要素が逆方向に移動しますが、IE6ではposition:relative; zoom:1を追加します。
.sample{
margin-top:-50px;
position:relative;
zoom:1;
}
●overfllow:hidden問題
overfllow:hiddenにはzoom:1;を追加します。
.sample{
overfllow:hidden;
zoom:1;
}
とりあえず基本としてはこんなところだと思います。
IE6、IE7、IE8に関しては、困ったら「zoom:1;を追加」で問題が解決することが多いと思います。
IE6などはズレても修正が簡単ですが、まれに、ごくごーくまれにFirefoxだけ、とかsafariだけちょっとズレた、なんてときは結構大変ですよね。本当にまれですけれども。
私が使っている、シンプルなclearfixとrecet.cssをまとめたファイルを紹介します。
clearfixは様々なものが色々な人によって作られてきましたが、いまいちシンプルでないものや、稀に効果が反映されなかったりするものがあります。
そのため「最も良いものはないか?」と以前調べたりカスタマイズしたりして、最終的に落ち着いたものが下記です。
@charset "utf-8";
/*----------------------------------------------------------------
* recet
----------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,blockquote,th,td {
margin:0;
padding:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
}
table {
border-collapse:collapse;
border-spacing:0;
}
object,embed {
vertical-align:top;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight:normal;
}
img,abbr,acronym,fieldset {
border:0;
}
li {
list-style-type:none;
}
/*----------------------------------------------------------------
* clearfix(フロート要素を含む親要素に適用させる)
----------------------------------------------------------------*/
#sample:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}
#sample{
zoom:1;
overflow:hidden;
}
clearfixにoverflow:hidden;を指定しているのは、Dreamweaver上で見るときにこの指定がないとレイアウトが崩れて表示されてしまうためです。
clearfixも、タグを指定する箇所が2つしかないので、スムーズに作業できると思います。
いま紹介していて思ったのですが、bodyなどにline-height:170%などを指定して行間空けると、たまーにFirefoxにおいて画像要素の上下に余白ができることがあるので、img要素にline-height:0;の指定を追加してもいいかも。。。
上記のファイルはこちらからダウンロードできます。ご自由に使用・改造・配布して頂いて結構です。
シンプルなclearfixと recet.cssをまとめたファイル