Question

当您在Safari中调整窗口宽度时，右侧的最后一个div框不是100％对齐，而是在最后一个div框和窗口边框之间的1-3px空间。

使用Safari查看并尝试调整宽度：http://jsfiddle.net/LPXfe/2/

知道如何修复空间吗？

HTML

<div class="outside">
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
</div>

CSS

.html, body {
    width:100%;
    height: 100%;
}

.outside {
    width:100%;
    min-height: 500px;
    position: relative;
    display: inline-block;
}
.inside {
    width:25%;
    height: 299px;
    position: relative;
    float: left;
    background-color: #dcdcdc;
}

Answer 1

这显然是safari浏览器中的一个问题（主要是在iOS中）。

我重新设计了CSS来修复这种情况。这不是最理想的，但是当浏览器无法正确渲染时，我们必须进行调整。

我删除了.outside和.inside框中的位置亲属，我将overflow-x：hidden添加到html，body标签中。这可以防止水平滚动。然后我将.outside的宽度设为101％。这会推出该框以隐藏有问题的像素。

html, body {
    margin:0;
    width:100%;
    overflow-x:hidden;
}

.outside {
    width:100.5%;
    height: 500px;
    overflow:hidden;
    background: #009900;
}
.inside {
    width:25%;
    height: 299px;
    float: left;
    background-color: #990000;
}

这是一个带有更新样式的jsFiddle。我为示例代码制作了更加鲜明对比的背景。

Answer 2

这可能是iOS倾向于重新调整小字体的副作用。

我在使用float的标签时遇到了问题：对；最终由this method解决。

CSS / Safari：浮动和百分比宽度的Div框不是100％对齐的

2 个答案: