Question

我必须将hasLayout应用于＆lt; i＆gt;元素到avoid an IE7 bug，其中带有斜体的句子遮挡了那些句子在同一水平线上的图像。

我使用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>

这样渲染：

alt text http://img193.imageshack.us/img193/968/haslayoutitalics.png

如何将正常功能恢复到我的＆lt; i＆gt; 元素？

Answer 1

您可以将＆lt; img＆gt;堆叠在违规的＆lt; i＆gt;之上。下面的代码删除了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>

通过zoom或inline-block将hasLayout应用于i元素会导致它在IE7中换行

1 个答案: