0

hasLayout を <i> 要素に適用して、イタリック体の文が同じ水平線上にある画像を覆い隠すIE7 のバグを回避する必要がありました。

zoomプロパティまたはプロパティのいずれかを使用してそうしましたdisplay: inline-block。

しかし今、イタリック体のフレーズは、イタリック体の部分が独自のブロックであるかのように動作します...ちょっと...または、IE7のみで、通常の文のように壊れたり折り返されたりしません。IE8 と FF は正常に動作します。

コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style>
i {zoom: 1;}
p {font-size: 20px;}
div {width: 200px; border: 2px solid red;}
</style>
</head>
<body>

<div>
<p>Here is a sentence. <i>Here is an italic sentence.</i> Here is another sentence.</p>
</div>

</body>
</html>

次のようにレンダリングします。

代替テキスト http://img193.imageshack.us/img193/968/haslayoutitalics.png

<i>要素に通常の機能を戻すにはどうすればよいですか?

4

1 に答える 1

1

問題のある <i> の上に <img> を積み重ねることができます。以下のコードは、hasLayout の修正を削除しますが、以前に表示されていた白いバーの上に画像を積み重ねます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>     
<title>Test</title>

<style type="text/css">

img {
    position: relative;
    z-index: 1;
}

p {font-size: 20px; background-color:#FFF;}
div {width: 200px; border: 2px solid red;}

</style>
</head>
<body>

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

    <div>
        <p>Here is a sentence. <i>Here is an italic sentence.</i> Here is another sentence.</p>
    </div>

</body>
</html>
于 2009-08-19T01:26:19.700 に答える