【css】Firefoxで見るとborder-bottomが消える

質問

ただいま、IEとFirefoxで動作確認をしております。
IEでは問題なく表示されるのですが、Firefoxで確認した場合、ボックスの下部のボーダーが消えてしまいます。

このとき、文字を大きくするとボーダーが表示されます。
また、文字を小さくすると、文字の大きさによっては表示される場合と表示されない場合とがあります。
こちらを回避する方法はあるのでしょうか？

不必要と思われる部分は端折っていますが、
html及びcssは下記の通りです。

///////////////////////////////////////////

<div id="aaa">
<div id="left">あああ</div>
<div id="right">あああ</div>
</div>

///////////////////////////////////////////
#aaa{
background-color: #ffffff;
border: 1px solid #000000;
width: 498px;
zoom:100%;
overflow:auto;
}
* html #aaa{
width: 500px;
overflow: visible;
height:1px;
}
#left{
float:left;
}
#right{
float:left;
}
///////////////////////////////////////////

回答No.2

goulan

>floatすると指定した背景が消えたり、高さが得られなかったりする

float指定した要素の中の画像は、 まさか background-image じゃないですよね・・・。

#aaa, #left, #right, これらの詳細（全部）と、これらを指定している要素の中身がわからないので、何とも言えないですが、overflow を指定してらっしゃるところを見ると、block要素か置換要素なのでしょうね。もしくは window そのものの幅を 498px以下と設定して書いてらっしゃるのでしょうか。なんにせよ、中身の幅は 498px以上、つまりblock要素か置換要素だろうと推測しております。

floatは、各ブラウザのバグが種々ありますが、構成がわかりませんので、具体的なコメント出来かねます。例としましては、位置がずれる、マージンが無視される、文字が消える、空白が生じる、etc...条件次第で色々ありますので、もう少しソースを明示していただかないと判りません。

それと、#left,#right と cssに指定なさってらっしゃいますが、両方とも float: left; 指定ですね。中身が同じというのは何か意味があるのでしょうか・・・。他にも指定してらして、割愛なさっただけなら読み捨てて下さい。

>>IEでは高さを1pxとしても何故か高さが得られる
IEは拡大解釈してくれちゃうというやっかいな部分があります。文書型宣言にもよります。そのあたりも、バグもありますし、やっかいです。そのため ハック技も色々ありますね。* html body ----は IE6のハックですし。

>>謎ばかりでcssは難しいですね・・・。
css自体には 謎は余りないと思います。謎なのは、各ブラウザの挙動の違いです。準拠を謳っていますが、完全対応は日暮れて道遠しの感があります。モダンブラウザは比較的対応してますけれど、全部いっぺんに完全対応してしまうと、今度は、サイト側の一斉書き直しが大変かもしれません（笑）

回答No.1

goulan

興味があったので、試してみました。当方のpcではIE6,IE7,Firefox2.0.0.11,Opera7,Opera9,safari3.0.3(win) どれも表示されます。

ver.違いでしょうか？

＞ * html #aaa
これはIEを意識なさってらっしゃるのだと推測しますが、ここの height: 1px; が理解不能です、すみません。ハックは余り詳しくなくて。ただ・・・もしやこれのせいとかは考えられませんか？
また、zoom: 100%; を指定なさってらっしゃいますが、img か object? をお使いだと思います。それの位置がずれているとか、かぶってしまっているとかありませんか。

お礼

ご回答ありがとうございます。
確かにimgは使っていますね。それが原因でしょうか？
何故かFirefox2.0では表示されませんでした・・・。

////////////////////////////
#aaa{
zoom:100%;
overflow:auto;
}
* html #aaa{
width: 500px;
overflow: visible;
height:1px;
}
////////////////////////////
の部分はfloatすると指定した背景が消えたり、高さが得られなかったりするため、それを解消するためのcssの記述です。
これを書かないとFirefoxでは背景の高さが得られずずれてしまいます。
IEでは高さを1pxとしても何故か高さが得られるんですよね・・・。

謎ばかりでcssは難しいですね・・・。