0

次のコードは、私が遭遇している問題を示しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style>

p
{
    background-color:#FFF;
}


</style>
</head>
<body>

  <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'>
  <p><em>This is an italic sentence.</em></p>
  <p><strong>This is a bold sentence.</strong></p>
  <p>This is a normal sentence.</p>

</body>
</html>

このコードを IE7 で表示すると、左側に Google ロゴが表示され、右側に表示される各段落に沿って「白い水平バー」が表示されます。

<em> タグで最初の行を削除すると、行が消えます。自分で試してみてください。3 つの行をそれぞれ削除して、バグがどのように変化するかを確認します。

これで世界で何が起こっているのですか？

--

解決策: hasLayout の問題。zoom: 1 属性を em に追加すると、問題が修正されます。

4

2 に答える 2

3

これは、浮遊画像のために発生しています。

画像がフローティングされている場合、技術的には独自のレイアウトはありません。白いバーは <p> タグです。これは、CSS で #FFF の背景を指定したためです。

IE7 の場合、<p> タグは実際にはページの一番左端から始まると考えられているため、そこから開始されますが、フローティング画像を超えてコンテンツをバンプするだけで、フローティング画像の上に面白い白いバーが残ります。

<p> タグに左マージンを与えることで回避しようとします。画像を通過するのに十分な左マージンを作成すると、それらのバーが表示されなくなります。

だから、次のようなものを試してみてください...

p{ background-color: #fff; margin-left: 300px; }

左マージンを調整できますが、それらの線に沿った何かで白いバーを取り除く必要があります.

于 2009-07-27T13:02:05.853 に答える