CSSで中央揃えのレイアウトをマークアップするとき、私なんかは良くhtmlにbackgroundプロパティを指定し、背景画像をcenter topというポジションを指定する。
しかし、FirefoxやOperaなどでは問題ないが、IE6,7が1px右にズレて表示される。
素直にbodyに背景画像を指定すれば、ずれる事はまず無いが、bodyに他の背景画像を指定したり、無駄にdivタグを噛ませたりしなくては行けなかったりするので、出来るだけレイアウト目的でマークアップはしたくない事を考えるとhtmlに背景画像を指定しなくてはならない。でも1pxズレル:(
そんな時の対処法としては、ひとまずハックで応急処置。
背景画像を指定しているセレクタ（この場合hmtlになる）にpadding-left:1px;と指定すると一応IEでも普通に表示されるようになる。
しかしそのまま指定したのでは、FirefoxもOperaなどの他のブラウザも読んでしまうので、プロパティの頭に/（スラッシュ）、もしくはセレクタの頭に*（アスタリスク）とかつけてIEしか読み込ませないようにする。
例は下記の通り
html{background:url(hoge.png) repeat-y top center ;
/padding-left:1px;
}
もしくは
html{background:url(hoge.png) repeat-y top center ;
}
* html{ padding-left:1px; }
という感じ。
ハックの使い方はCSSの特徴を逆に活かす。
CSSは最後に指定しているセレクタを優先してレンダリングするので、必ずハックの指定は正規の指定の下に書く事が基本。
（たまに上手く行かないという時はCSSの個別性が反映されてしまっているか、書き方が間違っているかのどちらかなので、良く黙視で確認した方が良いです。バリデーションを通しても、もともとハック事態がValidでないので、使っても意味無いと思います。）
- Newer: WDE一日目
- Older: PCを長く上手に使い続けるための基本法則
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://wd.kkws.org/archives/20/trackback
- Listed below are links to weblogs that reference
- IE6,7の背景が1pxズレる現象（バグ） from KANZAKI KAINE WEBSITE - WD