zoomまたはinline-blockでi要素にhasLayoutを適用すると、IE7で改行されます。

<i>からavoid an IE7 bugにhasLayoutを適用しなければなりませんでした。イタリック体の文章では、同じ水平線。zoomまたはinline-blockでi要素にhasLayoutを適用すると、IE7で改行されます。

これは、zoomプロパティまたはdisplay: inline-blockプロパティのいずれかを使用して行っています。

イタリック体のフレーズはイタリック体の部分があたかも自分のブロックであるかのように動作するようになります。ちょっと...またはIE7のみで普通の文のように折れたり折り返したりしません。 IE8とFFは正常に動作します。

コード例：私は戻って私の <私>要素への通常の機能を取得できますか

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

：

<!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>

は次のようにレンダリング？

出典

2009-08-19 Ian

img >を上にスタックすることができます。<i> 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

zoomまたはinline-blockでi要素にhasLayoutを適用すると、IE7で改行されます。

答えて

関連する問題