인라인 블록이 iPad에서 작동하지 않습니다.

Question

Codrops 자습서와 자체 지식을 사용하여 격자 레이아웃을 만들었습니다. 그리드는 display:inline-block;과 nth-child을 사용하여 마지막 요소에서 패딩을 제거하여 다음 줄로 깨지지 않도록 설정됩니다. 격자 크기가 변하면 미디어 쿼리에서 다른 n 번째 자식을 사용하여 마지막 요소에서 패딩을 제거합니다.이 요소는 세 번째 요소인지, 두 번째 요소인지 또는 첫 번째 요소이든 상관 없습니다.

모든 기능이 모든 데스크톱 브라우저에서 팽창하지만 iPad에서는 작동하지 않습니다.

iPad의 경우 그리드가 잘못된 위치에서 깨져서 끔찍하게 보입니다.

브라우저 창 크기를 줄이면 제대로 작동하기 때문에이 버그를 테스트 할 위치를 알 수 없습니다. 나는 아무 소용이 IOS 시뮬레이터와 함께 몇 가지 테스트를 시도했습니다. 그러나 흥미로운 점은 첫 페이지로드가 그리드가 잘 작동하고 완전히로드 된 후에 그리드가 깨지는 것입니다.

당신은 (아이 패드) 여기에서 문제를 볼 수 있습니다 http://www.eugeniacameronfoster.com/new/paintings/

감사합니다!

Answer 1

CSS Tricks article points out에는 몇 가지 문제가 있습니다. 당신을 대신의

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 

당신이

<ul> 
    <li> 
    one</li><li> 
    two</li><li> 
    three</li> 
</ul> 

을 넣을 필요가 나는 투표에 넣어 않도록

은 기본적으로 당신은 그리드에서 div의 사이의 공간을 제거해야합니다 단지 인라인 블록 아이디어를 얻고 flexbox 또는 box-sizing: border-box;

Answer 2

HTML 마크 업을 변경할 필요가없는 해결 방법이 있습니다.

부모 ul에 -0.31em의 음수 문자 간격을 사용하고 li의 문자 간격을 재설정하면 lis 사이의 공백이 사라집니다.

ul { 
    letter-spacing: -0.31em; 
} 

li { 
    letter-spacing: normal; 
    display: inline-block; 
} 

예

여기서 알 수 http://jsfiddle.net/c67U4/

이 트릭 부동 요소 대신 인라인 블록을 사용 PureCSS 그리드에서 특히 사용된다.