Safari nth-child error

Question

我正在寫一個響應式WordPress網站。我正在使用骨骼主題模板。包括網格系統在內的大部分網站都運行得很好，但是我發現我需要不同的屏幕尺寸的列數。

要做到這一點，我用了一下SCSS的，看起來像這樣：

(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這樣

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

這適用於桌面瀏覽器和Android大。但在Safari我得到的是這樣的：

什麼是真正奇怪的是，如果我刷新和/或旋轉的ipad到縱向或反之亦然，我得到這個：

但是，如果我點擊一個指向這個頁面的鏈接或者直接訪問它（在網址欄中輸入），佈局就會搞砸，直到我刷新或旋轉。

我可能會放棄這種方法，並在固定數量的列上移動，因爲這看起來很混亂。但我想我會問，因爲它只能在單個瀏覽器上運行。

Answer 1

這是因爲並非所有瀏覽器都以相同方式呈現百分比寬度的十進制值。

另一種方法是使用媒體查詢設置斷點以便鎖定不同的設備。

也嘗試四捨五入這些值，看看你是否設法得到一個可以接受的結果。

看到這個：Are the decimal places in a CSS width respected?

瀏覽器處理百分比不同，它不會是明智的，把太多的小數位數直入佈局。瀏覽器不管是向上還是向下都可以，所以你可以嘗試將它整理出來，看看你是否找到了解決方案。