page-break-inside : 레벨 요소를 피하고 차단하여 Chrome에서 빈 열을 만듭니다.

이 파일에서 https://jsfiddle.net/rpep00dg/7/은 Chrome의 빈 열 앞에 내용이 추가됩니다. Firefox 또는 Safari에서 바이올린을 열면 "헤더"앞에 빈 열이 없습니다. 첫 번째 요소가 p 태그와 같은 블록 수준 요소 인 경우에 해당합니다.page-break-inside : 레벨 요소를 피하고 차단하여 Chrome에서 빈 열을 만듭니다.

어디서나 문서화 된 Chrome 버그입니까? 또한 Firefox 및 Safari와 같이 렌더링 할 수있는 해결 방법이 있습니까? 여기에 문제의

section { 
 
    page-break-inside: avoid; 
 
    margin-bottom: 10px; 
 
} 
 

 
html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    column-count: 2; 
 
    column-gap: 36px; 
 
    width:100%; 
 
    height: 100%; 
 
    column-fill: auto; 
 
}

<section> 
 
<h1>Header</h1> 
 
<section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section> 
 
<section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section><section> 
 
lsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl flsdkfj sljfsdl fdsljfs;lkafjslf sa;lfjsl f 
 
</section> 
 
</section>

출처

2016-08-25 Justin

커플 :

당신은 당신의 제목 h1 태그에 section을 닫습니다 잊어 버렸습니다. 그것을 닫으면 크롬에서 정상적으로 작동합니다. 둘째

: 나는 위의 코드를 테스트

-webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; /*Default

및 예상대로 작동합니다

고려하여 특정 브라우저에 다음과 같습니다.

희망이 있습니다.

출처

2016-08-25 21:42:26

첫 번째'section' 태그는 실제로 나머지 HTML을 포함하며 맨 아래에서 끝까지 닫힙니다. 그것은 제가 작업중인 프로젝트의 마크 업입니다. 그것을 바꿀 수있는 여지가 충분하지 않습니다. – Justin

page-break-inside : 레벨 요소를 피하고 차단하여 Chrome에서 빈 열을 만듭니다.

답변

관련 문제