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 上效果很好。但在 safari 我得到这样的东西：

真正奇怪的是，如果我刷新和/或将 ipad 旋转到纵向，反之亦然，我会得到：

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

我可能会放弃这种方法并在移动设备上使用固定数量的列，因为这看起来真的很混乱。但我想我会问，因为它仅不适用于单个浏览器。

Answer 1

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

另一种方法是使用媒体查询设置断点，以针对不同的设备。

还可以尝试对这些值进行四舍五入，看看是否能得到可接受的结果。

看到这个：Are the decimal places in a CSS width respected?

浏览器处理百分比的方式不同，在布局中直接放置太多小数位是不明智的。浏览器向上或向下取整，因此您可以尝试向上取整，看看是否找到解决方案。