重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

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

解決済

  • 質問者：kingfruits
  • 質問日時：
  • 回答数：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>
<p id="bg">
test<br>
<span id="left">
a<br>
b<br>
c<br>
</span>
<span id="right">
1<br>
2<br>
3<br>
</span>
</p>
</body>
</html>

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

何が悪いのでしょうか？

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： taloo
  • 回答日時：

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


floatを使うと高さが0になるので、親要素の高さは、floatを使った部分の上までがその高さになります。
floatの後でclear:bothを入れればいいですが、
<br style="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の問題を解決）というクラス名をそのまま使うのはどうかと思うわけですよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

talooさん、これで3度目のご回答です。
いつもありがとうございます。

<br style="clear:both">を入れる方が、記述量が少ないので、
こちらでいこうと思います。

通報する
お礼日時：2008/07/19 15:39

No.1

  • 回答者： gityotan
  • 回答日時：

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


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

参考URL：http://www.google.co.jp/search?hl=ja&q=css+clear …
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

通報する
お礼日時：2008/07/19 15:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報