2009-04-27

[CSS] Firefoxで背景が出ない

IEでは表示されている背景が、CSSで表示されないことがあります。

これは、親要素に背景を指定していて、さらに子要素でfloatが行われているときに、
親要素の背景が表示されないというバグらしいです。
回避策として、以下のようなものがあります。

(1)親要素にもfloatを入れる。

(2)親要素にafter擬似クラスを使用する。

.親要素:after {
content: “.”;
display: block;
clear: both;
height: 0;
max-height: 0;
visibility: hidden;
}

(3)overflowを使用する。
.親要素:{
overflow:auto!important;
overflow /**/: hidden;
background:xxxxxx;
}

参考サイト
http://design.sevenagent.co.jp/2007/06/firefox.html
http://l2ko.jugem.jp/?eid=122
http://web-island.sakura.ne.jp/blog/2008/05/floatfirefox.html

Comment:

Trackback URL: