Safari nth-child错误

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。但在野生动物园，我得到这样的东西：

真正奇怪的是，如果我刷新和/或将ipad旋转为肖像，反之亦然，我明白了：

但是如果我点击指向此页面的链接或直接访问它（在网址栏中输入），布局就会搞砸，直到我刷新或旋转。

我可能会放弃这种方法并在移动设备上方使用固定数量的列，因为这看起来非常混乱。但我想我会问，因为它只是在一个浏览器上工作。

Answer 1

这是因为并非所有浏览器都以相同的方式呈现百分比宽度的十进制值。

另一种方法可能是使用媒体查询设置断点，以便定位不同的设备。

还要尝试对这些值进行舍入，看看是否能够获得可接受的结果。

请参阅：Are the decimal places in a CSS width respected?

浏览器以不同的方式处理百分比，将过多的小数位直接放入布局中是不明智的。浏览器向上或向下舍入，因此您可以尝试将其四舍五入，看看是否找到了解决方案。