通过缩放或内联块将hasLayout应用于i元素会导致其在IE7中换行 [英] Applying hasLayout to the i element via zoom or inline-block causes it to line break in IE7
问题描述
我必须将hasLayout应用于< i> 避免IE7错误的元素带有斜体的句子会使图像模糊，这些句子与这些句子在同一水平线上.
I've had to apply hasLayout to the <i> element to avoid an IE7 bug in which sentences with italics obscured images that those sentences were on the same horizontal line as.
我已经使用zoom属性或display: inline-block属性做到了这一点.
I've done so using either the zoom property or the display: inline-block property.
但是，现在，任何斜体词都会使斜体部分表现得好像是它自己的块一样……有点……或者，它不会像普通句子那样折断或包装，仅在IE7中. IE8和FF正常工作.
But now, any phrase in italics causes the italic portion to behave as if it were it's own block... kinda... or, it just doesn't break or wrap like a normal sentence would, in IE7 only. IE8 and FF work normally.
示例代码:
<!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>
渲染如下:
Renders like this:
替代文字http://img193.imageshack.us/img193/968/haslayoutitalics.png
如何恢复我的< i> 元素的正常功能?
How can I get normal functionality back to my <i> elements?
推荐答案
您可以将< img> s堆放在违背< i&s的上方.下面的代码删除了hasLayout修复程序，但是将图像堆叠在您之前看到的白条上方:
You could stack the <img>s above offending <i>s. The code below removes the hasLayout fix, but stacks the images above the white bars you were seeing before:
<!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>
这篇关于通过缩放或内联块将hasLayout应用于i元素会导致其在IE7中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
