WebKit에서 인쇄 할 때 모든 페이지의 요소

예를 들어 WebKit에서 인쇄 할 때 <div> 또는 <img>이 모든 페이지에 나타나려고합니다.WebKit에서 인쇄 할 때 모든 페이지의 요소

이 IE/FF에서 작동이 웹킷에서 뛰어난 버그, 대안이있다처럼

@media print { 
 
    .logo { 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
}

<div style="page-break-after:always"></div> 
 
<div style="page-break-after:always"></div> 
 
<img class="logo" src="http://placehold.it/100x100/" alt="" />

이 보인다? 고맙습니다.

출처

2015-01-11 Nine

Chrome v39.0.2171.95 m (Windows/7)에서 작동합니다. –

크롬에서도 테스트 된 것처럼 보입니다. http://jsfiddle.net/4ed1x0x6/ – scniro

인쇄 미리보기에서 여러 페이지를 포함 할 정도로 충분한 콘텐츠를 html에 추가해야합니다. Chrome에서는 이미지가 첫 페이지에만 표시되는 반면 IE/FF는 각 페이지에 하나씩 표시됩니다. – Nine

이는 워터 마크 작동하는 방법입니다 ...

div.watermark{ 
    display:none; 
}

다음 @media print

div.watermark{ 
    display:block; 
    position:fixed; 
    z-index:-1; 
    width:100%; 
    height:100%; 
} 
    div.content > *:first-child,x:-moz-any-link{margin-top:0;}/* ff only */ 
    div.watermark,x:-moz-any-link{z-index:auto;}/* ff only */ 
    div.watermark,x:-moz-any-link,x:default{z-index:-1;}/* ff3 only */ 

    @media all and (min-width: 0px){div.watermark{width:8.5in;}} /* opera only */ 

    div.watermark div{ 
     position:absolute; 
     left:0; 
     width:99%; 
    }

내가이 문서가 효과적으로 http://www.andypemberton.com/css/print-watermarks-with-css/

를 수행 할 작업을 설명 생각 불행히도 이것은 웹킷의 문제입니다.

솔루션 : 당신은 ... 자세한 내용은이 대답에

page-break-before: always; 
page-break-inside: avoid; 
display:block

봐 모든 픽셀의 표준 페이지 크기는 말을 한 후 자바 스크립트로 이미지 클래스를 복제하고 화면 숨겨진 유지하고 추가해야 https://stackoverflow.com/a/19170212/1278540

그리고이 데모http://fiddle.jshell.net/jaap/7ZGVv/2/show/

나쁘지 IMO 봐.

출처

2015-09-28 19:46:59

WebKit에서 인쇄 할 때 모든 페이지의 요소

답변

관련 문제