Firefoxのみborderが消える現象

締切済

質問者：sdfxjp
質問日時：2009/07/08 14:13
回答数：1件

お世話になっております。
以下のソースのように、ページを左カラムと右カラムに分けて上から下までカラムをheight:100%にしているます。右カラムの左にボーダーをドットで入れているのですが、IEでは表示されるborderがFirefoxでは表示されません。解決方法をご教授お願いいたします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<title>サンプル</title>

<style type="text/css">

</style>
</head>

<body>
<div id="wrapper">
<div id="left">
aaa
</div>
<div id="right">
aaa
</div>
</div>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： abril
回答日時：2009/07/08 14:51

これは【質問番号：5105806】の続きですね？

確かにFirefox3（2は問題なし）ではボーダーが描画されていないのを確認しました。
検証したところ、どうも下記の指定があるせいでこの不具合が起きる様です。

padding-bottom: 32768px;
margin-bottom: -32768px;

#rightからこの2つの指定を削除すると左側のボーダーが描画される様になります。
ただし、そうしてしまうとせっかくのウィンドウの下端までの描画ができなくなってしまいますので、方法を考えました。

この状態だと、"border-left: 1px dotted #000;"の様な1辺だけの指定は効きませんが、"border: 1px dotted #000;"の様な四辺まとめての一括指定だと反映される様です。従って、回りくどいのですが、"border-left: 1px dotted #000;"の替わりに、

border: 1px dotted #000;←一度四辺を一括指定しておいて
border-width: 0 0 0 1px;←左辺以外の太さを0に

…とすると"border-left: 1px dotted #000;"と同じ結果が得られます。

あと、コピペのミスかもしれませんが、

#wrapper {
（省略）
overflow:hidden;
overflow: show;←ここの指定にアンダースコア・ハックが抜けてます。これだとIE6だけでなく、全ての環境で"overflow: show;"の方が有効になってしまいます。
}

ご確認を。