cake shopのIE6対策＠11月1日

HTML&CSS

今日は、代理の先生でした。
昨日「IE Tester」でcakeshopのサイトを見たら、IE6だけがセンターにならずにサイドバーが落ちて崩れていたので、その修正をする。

（1）リセットにzoon:1;を入れる。

*{ margin:0; 
       padding: 0;
       zoom:1; }

（2）body{text-align:center}を入れて、IE6をセンターにする。

（3）2番でセンターになった文字等をcontainer{text-align:left}で元に戻す。
（4）頭に*（アスタリスク）をつけるとIE6だけが読み込む。
　　　IE6は、padding等が2倍に膨らむので、半分の値を入れて修正する。

例　padding:40px /*正常な指定*/
    *padding:20px /*IE6対策*/

（5）!importantを入れると先に書いても優先される。
　　　IE6には効かないので、後に対策用の数値をいれる

例　padding:40px !important;/*正常な指定*/
   padding:20px; /*IE6対策*/

(6)IE6だけのスタイルシートを書く。

E6だけに読み込ませたい場合
　　<!--[if IE 6 ]>
    <link href="css/ie6.css" rel="stylesheet"　type="text/css" />
    <![endif]-->

修正後のCAKE SHOP

↑1〜4番で、6は綺麗になりました。個人的には、IE6は捨てたいです・・・。