zoom 또는 inline-block을 통해 iLayout을 적용하면 IE7에서 줄 바꿈이 발생합니다.

<i> 요소에서 avoid an IE7 bug으로 hasLayout을 적용해야했습니다. 기울임 꼴 문장은 이미지가 동일한 수평선.zoom 또는 inline-block을 통해 iLayout을 적용하면 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 >을 위에 쌓을 수 있습니다. <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을 통해 iLayout을 적용하면 IE7에서 줄 바꿈이 발생합니다.

답변

관련 문제