通過縮放或嵌入塊應用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中換行

回答

相關問題