Html Safarin子错误

我正在写一个反应迅速的wordpress网站。我正在使用骨骼主题模板。包含的网格系统在网站的大部分地方都运行得很好，但我发现我需要在不同屏幕大小上为特定页面设置不同的列数

为此，我使用了一点SCS，如下所示：

 (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上非常有效。但在狩猎旅行中，我得到了这样的东西：

 (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;
                }
        }
 }

真正奇怪的是，如果我刷新和/或将ipad旋转到纵向或相反方向，我会得到以下结果：

但是，如果我单击指向此页面的链接或直接访问它（在url栏中键入），则在刷新或旋转之前，布局会混乱

---

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

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

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

另外，尝试将这些值舍入一点，看看是否能得到一个可接受的结果

见此：

---

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

知道为什么它会在设备旋转/刷新时自行修复吗？此外，差异是如此之大，我无法想象它是一个舍入错误…您可以在代码集中有一些元素，例如“position:fixed”和safari，众所周知，它有一个bug。一个解决方法是设置“位置：绝对”，但这更多的是关注输入框。我应该看看你所有的代码才能有一个想法。嘿，我认为你说的舍入错误是对的-这里描述的。实际上，我通过将第二个元素向右浮动并放弃多个不同的列布局来修复它。