Posted at 2009-11-27T11:30:00+09:00 in Web Design
ブラウザごとのデフォルト・スタイルシートの違いを吸収するためのスタイルシートをメンテするのが面倒になったので、YUI 3のCSS Resetを使うことにした。が、このサイトではちょっとした問題が起こった。少し前にTwitterでつぶやいたりしたhtml要素にbackground-colorやbackground-imageを指定した場合、body要素の背景が描画エリアいっぱいにならなくなるというCSSの仕様絡みの問題。
この仕様によってbody要素に指定していたヘッダの背景画像がずれてしまった(ずれるサンプル)。ずれる理由は上記仕様によりbody要素の上下でmarginの相殺が起こり、marginの相殺が起こった部分は透明(親であるhtml要素)が透けて見える)ようになり、背景画像の開始点はそれに続くbody要素のコンテント・エリアになるから。
html {
color: #000;
background: #FFF;
}
問題になるのは以上の部分なので、reset(-min).cssより後に読み込まれるCSSファイル内で、
html {
background-color: transparent;
background-image: none;
}
とすればとりあえず回避できる。
YUI 2.4.0でbody要素からhtml要素にcolorプロパティとbackground-colorプロパティが移動されたようなんだけど、理由書いてない……。
このエントリと同じカテゴリに投稿された最近10件のエントリです。
JavaScriptに対応、または有効な環境の場合、ここにこのエントリへのはてなブックマークコメントが表示されます。
Dummy element for AutoPagerize.