スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
【--/--/--】 | スポンサー広告 | page top↑
ボックスモデルハック
widthを、paddingやborderと併用する時に、ブラウザによって、領域の幅が変わってしまうのを防ぐハック。
例)
border:50px solid pink; (色はダミー)
width:300px;
background-color: yellow; (色はダミー)


領域自体にpaddingやborderを設定すると、Windows IE5ではwidthの中に含んでしまう。

ボックスモデルハック


これを防ぐために


border:50px solid pink; (色はダミー)
width:300px !important; (通常指定)
width /**/:500px; (IE5用に、border分を足す)
background-color: yellow; (色はダミー)



<説明>
!important
  →優先してこの値を適用させる。
   しかしIE6まではこれが適用されず、後の記述が優先されてしまう。
/**/
  →IE6はこれが記述された値をうまく読み込めない。

つまり
IE5・IE6以外のブラウザではimportantの300pxを読み込む。
IE5は、importantを読み込めないため500pxを読み込む。
IE6は、最初にimportantを無視して500pxを読み込もうとするが、/**/が読み込めないため、結局、後順位の300pxを読み込む。
スポンサーサイト
【2006/07/29】 | CSS/ハック | コメント(0) | page top↑
<<説明文のあるリストの作成 | ホーム | 画像にマウスオーバーしてもイメージツールバーを表示させない>>
コメント
コメントの投稿














管理者にだけ表示を許可する

| ホーム |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。