IE7 div 테두리 인쇄 문제

인쇄 할 때를 제외하고 IE7, Firefox 및 Safari에서 동일한 내용을 렌더링하는 웹 페이지가 있습니다. IE7은 인쇄 할 때 테두리에 너무 많은 공간을 할당하는 것으로 보입니다.IE7 div 테두리 인쇄 문제

아래 예제에서 상자 높이와 테두리는 2 개의 열에 같은 높이가되어야합니다. borders을 10px으로 설정하여 문제를 과장합니다.

나는 CSS 해킹이 싫지만, 지금까지 나는 그것들없이 페이지를 만들 수 있었다. 어떤 제안?

<!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>Untitled Page</title> 

    <style type="text/css"> 
    .container 
    { 
    height:  120px; 
    width:  240px; 
    margin:  0; 
    padding: 0; 
    border:  solid 1px red; 
    } 
    .box1 
    { 
    height:  10px; 
    width:  100px; 
    margin:  0; 
    padding: 0; 
    border:  solid 10px black; 
    float:  left; 
    clear:  left; 
    } 
    .box2 
    { 
    height:  100px; 
    width:  100px; 
    margin:  0; 
    padding: 0; 
    border:  solid 10px black; 
    float:  right; 
    } 
    </style> 

</head> 
<body> 

    <div class="container"> 
    <div class="box1">&nbsp;</div> 
    <div class="box2">&nbsp;</div> 
    <div class="box1">&nbsp;</div> 
    <div class="box1">&nbsp;</div> 
    <div class="box1">&nbsp;</div> 
    </div> 

</body> 
</html>

출처

2009-02-06 Keith Walton

! 당신이 맞아요. 화면 버전처럼 보이지 않습니다. – scunliffe

1 %에 .box1의 라인 높이 속성을 설정하십시오 :

또한

.box1 
    { 
    line-height:   1%; 
    }

, CSS를 재설정을 사용하는 방법에 대해 생각합니다.

편집 : 또한 box1 div 앞에 box2 div를 넣으십시오.

라인 높이 이렇게하면 그것을 해결 재미있는

<div class="container"> 
     <div class="box2"> </div> 
     <div class="box1"> </div> 

     <div class="box1"> </div> 
     <div class="box1"> </div> 
     <div class="box1"> </div> 
     </div>

출처

2009-02-06 20:03:40 jacobangel

줄 높이없이 작동합니다. 왜 그런가? –

인쇄 된 페이지에서 box2가 첫 번째 상자 1을 지우는 것처럼 보입니다. 버그는 플로팅 왼쪽/오른쪽/왼쪽 시퀀스에 의해 트리거 될 수 있습니다. –

IE7 div 테두리 인쇄 문제

답변

관련 문제