#bg{ width: 500px; background: #f8dce0; } #left{ float: left; z-index: 1; } #right{ float: right; z-index: 2; } #ans1_0,#ans1_1,#ans1_2{ color: #FF0000; } test a b c 1 2 3 上記をIE,FireFox2,Operaで試してみると、FireFox2のみ期待した表示が得られません。何が悪いのでしょうか？

CSS z-index？ブラウザによって表示結果が異なってしまう。

解決済

質問者：kingfruits
質問日時：2008/07/19 12:56
回答数：2件

<html>
<head>
<style type="text/css">
#bg{
width: 500px;
background: #f8dce0;
}
#left{
float: left;
z-index: 1;
}
#right{
float: right;
z-index: 2;
}
#ans1_0,#ans1_1,#ans1_2{
color: #FF0000;
}
</style>
</head>
<body>

test 

a 
b 
c 


1 
2 
3 


</body>
</html>

上記をIE,FireFox2,Operaで試してみると、FireFox2のみ期待した表示が得られません。

何が悪いのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： gityotan
回答日時：2008/07/19 13:57

ピンク色を下まで伸ばしたいということであれば、

clearfixハックを使えば解決します。

参考URL：http://www.google.co.jp/search?hl=ja&q=css+clear …

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございました。

いただいたアドバイスで、期待通りの表示になりました。

通報する

お礼日時：2008/07/19 15:33

No.2ベストアンサー

回答者： taloo
回答日時：2008/07/19 14:25

z-Indexではなく、floatの影響です。

floatを使うと高さが0になるので、親要素の高さは、floatを使った部分の上までがその高さになります。
floatの後でclear:bothを入れればいいですが、
 よりも、clearfixという方法があります。

#bg:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#bg { display: inline-block; }
/*\*/
* html #bg { height: 1% }
#bg {display:block;}
/**/

個人的にはclearfix（clearの問題を解決）というクラス名をそのまま使うのはどうかと思うわけですよ。