通过缩放或嵌入块应用hasLayout到i元素导致它在IE7中换行

我不得不将hasLayout应用到<i>元素到avoid an IE7 bug其中用斜体显示的句子遮蔽了那些句子在与...相同的水平线。通过缩放或嵌入块应用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>

呈现这样的：

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

我怎样才能得到正常功能回到我 <我>元素？

来源

2009-08-19 Ian

你可以堆叠<IMG> S上方得罪<我>秒。下面的代码删除的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-19 01:26:19 Pat

通过缩放或嵌入块应用hasLayout到i元素导致它在IE7中换行

回答

相关问题