Safari nth-child 오류

Question

나는 반응이 빠른 WordPress 사이트를 작성하고 있습니다. 나는 뼈 테마 템플릿을 사용하고 있습니다. 그리드 시스템은 대부분의 사이트에서 잘 작동했지만, 특정 페이지에 대해 다른 화면 크기에서 다른 수의 열이 필요하다는 것을 알았습니다. 이 데스크톱 브라우저와 안드로이드에 좋은 작품이

<div class="pracareas"> 
    <section>... content</section> 
    <section>... content</section> 
    <section>... content</section> 
    <section>... content</section> 
</div> 

처럼

(base media query) 
section{ 
     display:table; 
     float:left; 
     margin-left:0; 
     width:100%; 
} 

(media query for 768 px and above) 
section{ 
     height:150px; 
     width:48.618784527%; 
     &:nth-child(3n+1), &:nth-child(2n){ 
       margin-left:2.76243%; 
     } 
     &:nth-child(2n+1){ 
      margin-left:0; 
     } 
     text-align:right; 
} 
(media query for 1030px and above) 
.pracareas{ 
     section{ 
       width:31.491712705%; 

       &:nth-child(2n+1){ 
         margin-left:2.76243%; 
       } 
       &:nth-child(3n+1){ 
         margin-left:0; 
       } 
     } 
} 

그리고 HTML :

이 작업을 수행하기 위해, 나는 다음과 같습니다하는 SCS의 비트를 사용했다. 하지만 사파리에 나는 이런 식으로 뭔가를 얻을 :

정말로 이상한 것은 내가 새로 고침 및/또는 세로 또는 그 반대로 아이 패드를 회전하는 경우,이 얻을 :

을

하지만이 페이지로 연결되는 링크를 클릭하거나 URL 바로 가기를 방문하면 새로 고침하거나 회전 할 때까지 레이아웃이 엉망입니다.

저는이 접근법을 포기하고 모바일 위의 고정 된 수의 열을 찾으러 갈 것입니다. 왜냐하면 이것은 정말로 지저분 해 보입니다. 하지만 그것은 하나의 브라우저에서만 작동하지 않기 때문에 내가 물어볼 줄 알았다.

Answer 1

모든 브라우저가 같은 방식으로 백분율로 십진수 값을 렌더링하지 않기 때문입니다.

또 다른 접근법은 다른 장치를 목표로하기 위해 미디어 쿼리와 함께 중단 점을 설정할 수 있습니다.

또한 그 값을 약간 반올림하여 허용 가능한 결과를 얻을 수 있는지 확인하십시오.

이를 참조하십시오 Are the decimal places in a CSS width respected?

브라우저가 다르게 비율을 처리, 바로 레이아웃에 너무 많은 소수의 장소를 넣어하는 것이 현명하지 않을 것입니다. 브라우저는 반올림 또는 반 내림하므로 반올림하여 해결책을 찾도록 시도 할 수 있습니다.