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

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