通过缩放或内联块将 hasLayout 应用于 i 元素会导致它在 IE7 中换行答案

【问题标题】：Applying hasLayout to the i element via zoom or inline-block causes it to line break in IE7通过缩放或内联块将 hasLayout 应用于 i 元素会导致它在 IE7 中换行
【发布时间】：2010-01-13 15:00:03
【问题描述】：

我不得不将 hasLayout 应用于 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

如何让我的 元素恢复正常功能？

【问题讨论】：

标签： internet-explorer-7 haslayout

【解决方案1】：

您可以将堆叠在有问题的 之上。下面的代码删除了 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>

【讨论】：