IE는 CSS에서 빈 페이지를 인쇄합니다. 보일러 플레이트

Question

우리 회사는 인쇄용으로 print.css를 사용하고 있습니다. 또한 print.css를 비롯한 다른 .css 파일을 무시하는 또 다른 style.css가 있습니다. 어떤 이유로 html5 상용구 (재정의 파일에 있음)의 @media 인쇄 쿼리가 켜져있을 때 IE8과 IE9가 빈 페이지를 인쇄합니다. 댓글을 달았을 때 아무런 문제가 없습니다. 여기서 문제는 무엇입니까? 우리는 상용구에서 @media 인쇄물을 남기고 싶습니다.

PRINT.CSS

@media print 
{ 
body * 
{ 
    visibility:hidden; 
} 

#basicShell #main, 
#basicShell #main *, 
.basicShell_container .content, 
.basicShell_container .content *, 
#mainShell_container .center_columnContent, 
#mainShell_container .center_columnContent * 
{ 
    visibility:visible; 
} 

#basicShell #main, 
.basicShell_container .content, 
#mainShell_container .center_columnContent 
{ 
    position:absolute; 
    left:0; 
    top:0; 
} 
} 

있는 style.css는

@media print { 
* { background: transparent !important; color: black !important; text-shadow: none  
!important; filter:none !important; -ms-filter: none !important; float: none 
!important;} /* Black prints faster: h5bp.com/s */ 
a, a:visited { text-decoration: underline; } 
a[href]:after { content: " (" attr(href) ")"; } 
abbr[title]:after { content: " (" attr(title) ")"; } 
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* 
Don't show links for images, or javascript/internal links */ 
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 
thead { display: table-header-group; } /* h5bp.com/t */ 
tr, img { page-break-inside: avoid; } 
img { max-width: 100% !important; } 
@page { margin: 0.5cm; } 
p, h2, h3 { orphans: 3; widows: 3; } 
h2, h3 { page-break-after: avoid; } 
} 

Answer 1

print.css의 첫 번째 규칙은 눈에 보이지 않는 body의 모든 하위 요소를 만드는 (모든 것을 무시). 의도는 일부 요소를 표시되도록하는 것으로 보이지만 의도하지 않은 마크 업 (id 및 class)이 의도 된 방식으로 사용되지 않았기 때문에 분명히 실패합니다.

Answer 2

귀하의 사이트에로드되는 스타일 시트의 우선 순위를 고려해야합니다. 현재 당신은 이것을 print.css 스타일 시트에 명시된있다 : 규칙

는

body * { 
    visibility:hidden; 
} 

기본적으로 문서 내부의 "모든"숨 깁니다. styles.css 스타일 시트가 모든 것을 오버라이드한다고 가정했는데 헤더에 스타일 시트가 어떤 순서로로드 되었습니까? print.css 시트가 style.css 시트 뒤에 있으면 첫 번째 규칙이 그대로 적용됩니다.

링크 참조에 포함 된 media 유형의 경우도 있습니다. 어떤 것이 더 나은 우선 순위인지는 모르겠습니다. 링크 미디어 유형 또는 미디어 쿼리.

Answer 3

HTML5 상용구에서 같은 문제가 발생했습니다. 내 경우

, 그것은이 라인으로 밝혀졌다 : IE8/9에 빈 페이지가 발생

tr { page-break-inside: avoid; } 

. 이 페이지는 한 페이지에 많은 양의 내용을 담고 있었고 IE는 페이지를 건너 뛰고 내용을 잘라 냄으로써이를 처리하기로 결정했습니다. 왝.

는 HTML5 상용구 덤비는 방지하기 위해, 나는 내 자신의 스타일에 다음을 추가하고, 문제가 해결 :

tr { page-break-inside: auto; } 

문제가 다른 태그로 인해있을 수 있으므로 페이지 -을 설정하는 것을 확인 침입 속성.