２段組レイアウト時に意図しない空白が生じる

解決済

質問者：asock
質問日時：2006/09/01 01:21
回答数：1件

IE6.0 と firefox での動作が異なって困っています。
HTMLおよびスタイルシートは以下の通りです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div.area_body {
width: 80%;
margin: 0 auto;
background-color: yellow;
}

div.area_navi {
float: left;
width: 100px;
background-color: red;
}

div.area_content {
margin-left: 100px;
background-color: blue;
}
div.block1 {
background: green;
}
div.block2 {
background: blue;

}
-->
</style>
</head>
<body>
<div class="area_body">
<div class="area_navi">
aaa<br>
aaa
</div>
<div class="area_content">
<div class="block1">
a <br />
<div class="block2">
b <br />
c <br />
</div>
d
</div>
</div>
</div>
</body>
</html>

IE 6.0 (win) における右段の文字

　a
　b
c
d

firefox (win) における右段の文字

a
b
c
d

となり、IEは左段に文字がある場合に右段の文字が微妙にインデントされてしまいます。

firefoxの結果が自分が望む動作なのですが、原因は何でしょうか？

アドバイスをお願いします。

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： noname#20377
回答日時：2006/09/01 01:57

自信なし

Internet Explorer (Windows) CSSバグリスト-フロートの左右にある行の端がずれる
http://cssbug.at.infoseek.co.jp/detail/winie/b15 …

- 0
- 件

通報する

この回答へのお礼

まさにこちらのバグと同じ現象です。
参考URLの対策法だとたしかに見かけ上のインデントはなくなったものの、その分divブロック自体がずれてしまうという現象が起こってしまったので、floatは諦めて position:absolute; による段組で解決いたしました。

ありがとうございます。

しかしこんなにバグがあるとは…。

通報する

お礼日時：2006/09/01 02:13

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