世界中の１％の人々へ

３月24日のコラムで、後方互換モード対策に対応できなきゃ、IE6用に別に書いちゃえと書いたら…

@Styleさんからトラックバックでご指摘いただいた。

注意書きは書いておいたが、やはり、*htmlはIE7のStrict（厳格）モードにおいて機能しなくなるCSSハックであった(謝)。
http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

お礼のメールを書いたら…

ブロックをpadding：0として…、に続き、具体的コードまで書いてある親切な返事が届いた。
＃感謝しています。

なるほど、この方法ならば、IE6用に別途書く必要もない。
以下、自分の恥をさらすようだが、私の例を書く。

私の書いたCSS（赤字部分IE7において致命的）

/*ヘッダー制御*/
#banner {
    font-family: Verdana, Arial, sans-serif;
    background-image: url("banner_back.gif");
    padding: 25px 10px 10px 40px;
    text-align: left;
    }
#banner-size{
    with: 730px;
    height: 85px;
    }
/*タイトル文字*/
h1 {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 0px 0px 12px 0px;
    margin: 0px;
    }
/*IE6後方互換モード対策用*/
*html h1 {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 4px 0px 12px 0px;
    margin: 0px;
    }

教えていただいた方法を元に修正したCSS

/*ヘッダー制御*/ 
#banner {
    font-family: Verdana, Arial, sans-serif;
    background-image: url("banner_back.gif");
    text-align: left;
    margin: 0px;
    width: 780px;
    height: 120px;
    }
#banner .pad {
    padding: 25px 10px 10px 40px;
    }
/*タイトル文字*/
h1 {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 0px 10px 10px 0px;
    margin: 0px;
    }

違いがわかるだろうか？
違いがわかれば、後方互換モード対策はずっと楽になる。

参考になれば幸い。

丁寧にやり方を教えていただいた、@Styleさんには、この場を借りてお礼を述べたい。
ありがとうございました。
おかげで理解できました。
未熟者ですが、精一杯努力しますので、今後ともよろしくお願いします。

＃まだまだ、勉強足りないなぁ…＞俺 

参考リンク

Web標準 Webサイト制作 [アットスタイル]
http://atstyle.biz/

XHMLやCSSを正しく学ぼうと思っても、参考にできるサイトは、ほんの少ししかない。
まして、本に書いてある情報は古いので、参考にならない場合が多い。
上記サイトは数少ない、参考にできるサイトで、かなり勉強になる。

投稿者: Dakiny 日時: 2006年3月27日 05:27 |    |   |    |   |  パーマリンク | コメント(2)  | トラックバック (0)

トラックバック

このエントリーのトラックバックURL:
http://www.dakiny.com/mtos/mt-tb.cgi/540
※文章内容と関係のないトラックバックは固くお断り。