Firefox는 인쇄 할 때 페이지 나누기 전 무시
알바로 곤잘레스
@media print{}인쇄용 사이트를 조정 하는 섹션이 있습니다. 메인 블록 앞에 페이지 나누기를 강제하고 있습니다. 그러나 Firefox에서는 요소가 겹칩니다 (다른 브라우저는 예상대로 모든 것을 렌더링합니다). 다음 인쇄 미리보기에서 알 수 있듯이 빨간색 블록은 3 페이지로 이동하지 않고 상단 또는 이전 콘텐츠에 표시됩니다.
HTML 구조는 다음과 같습니다.
<div class="cols">
<div class="col col1de2">This is the yellow block</div>
<div class="col col2de2">This is the blue block</div>
</div>
<div class="extra">This is the red block</div>
... 그리고 이것은 관련 CSS입니다.
.cols{
overflow: hidden;
}
.col{
float: left;
width: 40%;
}
.extra{
page-break-before: always;
clear: both; /* Attempted workaround: didn't work */
}
JSFiddle의 결과 프레임 (아마도 PDF 프린터 로 인쇄해야하지만 프레임에서 인쇄 미리보기 메뉴 항목 을 트리거하는 방법에 대해 확실하지 않음) 을 인쇄해야하지만 그 동작을 볼 수 있습니다 .
수정 또는 해결 방법을 알아낼 수 있습니까?
Abhitalks
이 때문에입니다 float. s에 page-break미친 듯이 간다 float. 사용 사례에서 Firefox가 이것에 대해 더 까다로운 것 같습니다.
옵션 1:
단일 열로 할 수 있다면 스타일 float에서 제거하십시오 @media print.
필요한 변경 사항은 다음과 같습니다.
@media print {
.col { float: none; width: auto; } /* remove the floats for print */
.extra { page-break-before: always; } /* no change here */
}
옵션 2 :
부모 가 아닌 수레를 지우십시오 ( 실제로 바이올린의 바깥 쪽 대신 내부 부모에 있었어야했지만 여기서는 중요하지 않습니다 ); 그러나 div당신 .col의 추가 형제 자매에서 그것을 지우십시오 .
필요한 변경 사항은 다음과 같습니다.
마크 업
<div class="cols">
<div class="col col1de2">Sed lacinia mi..</div>
<div class="col col2de2"> Suspendisse sit amet..</div>
<div class="clear"></div> <!-- clear the float here -->
</div>
CSS
.col { float: left; width: 40%; } /* no change here */
.clear { clear: both; } /* clear here */
요약하자면 : page-break-x적용되는 요소의 바로 앞이나 뒤에있는 부동 또는 지우기 부동이 없는지 확인하십시오 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
dompdf에서 페이지 나누기를 사용할 때 디자인 나누기를 해결하는 방법
- 2
인쇄 할 때 페이지 나누기로 인해 Div 테이블이 깨졌을 때 DIV 테이블 머리글 및 바닥 글을 반복하는 방법
- 3
인쇄를 위해 스타일을 지정할 때 페이지 나누기를 강제 할 수 있습니까?
- 4
Flutter : 사용자가 이미 로그인 했는데도 앱을 다시 시작할 때마다 홈 화면으로 이동하기 전에 로그인 페이지가 잠깐 나타나는 이유는 무엇입니까?
- 5
awk가 변수를 인쇄하려고 할 때 전체 행을 인쇄하는 이유는 무엇입니까?
- 6
java -jar로 호출 할 때 인쇄 기능이 인쇄되지 않는 이유는 무엇입니까?
- 7
페이지 나누기를 사용할 때 열 그룹을 숨기는 방법
- 8
Python : 전체 개체 목록을 인쇄 할 때 인쇄 기능이 중단됨
- 9
25 페이지 pdf를 인쇄 할 때 dompdf 시간 초과
- 10
DotNetBrowser에서 인쇄하기 전에 녹아웃 페이지로드가 완료 될 때까지 기다리는 방법은 무엇입니까?
- 11
0으로 나누기가 발생할 때 이전 값 유지
- 12
인쇄시 페이지 나누기에서 텍스트 잘림
- 13
Word에서 구역 나누기를 삭제할 때 이전 서식 나누기
- 14
PDF를 인쇄 할 때 두 페이지가 압축되도록 변환하는 방법은 무엇입니까?
- 15
오류 페이지를 표시 할 때 Grizzly 서버 버전을 숨기는 방법이 있습니까?
- 16
HTML 문서를 인쇄하기 전에로드 / 렌더링 할 때까지 기다리는 방법 (일반 JavaScript)
- 17
인쇄 미리보기는 Google Chrome 버전 53.0.2785.143에서 두 페이지로 문자를 분할합니다.
- 18
Firefox에서 인쇄 할 때 글꼴 크기를 변경하는 방법은 무엇입니까?
- 19
인쇄 할 때 항상 빈 페이지가 하나 더 있습니다.
- 20
인쇄 할 때 여러 HTML 표를 여러 페이지로 나눕니다.
- 21
개체 목록을 인쇄 할 때 표시되지 않는 값
- 22
Google 크롬에서 인쇄를 시도 할 때 웹 페이지가 충돌 함
- 23
내 코드의 함수로 인쇄 할 때 포인터를 직접 인쇄하면 다른 결과가 나타나는 이유는 무엇입니까?
- 24
Bash 스크립트에서 전체 배열을 인쇄 할 때 화면에 구분 기호가 인쇄되지 않도록하는 방법
- 25
인쇄 할 때 출력의 일부가 표시되지 않는 이유는 무엇입니까?
- 26
테두리가있는 HTML 페이지 나누기 테이블 (인쇄)
- 27
로그인 페이지를 실행할 때 등록 페이지가 나타나는 이유는 무엇입니까?
- 28
헤드리스 크롬을 설정하는 방법은 인쇄하기 전에 페이지가 완전히로드 될 때까지 대기합니까?
- 29
인쇄 할 때 사전을 정리하는 방법이 있습니까?
몇 마디 만하겠습니다