CSS / Safari:浮动和百分比宽度不是100%对齐的Div框
CSS / Safari:浮动和百分比宽度不是100%对齐的Div框
提问于 2012-12-26 17:15:04
当你在Safari中调整窗口宽度时，右边的最后一个div框并没有100%对齐，而是在最后一个div框和窗口边框之间留出了1-3px的间距。
使用Safari查看并尝试调整宽度：http://jsfiddle.net/LPXfe/2/
你知道怎么修整这个空间吗？
.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;
}<div class="outside">
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
</div>
回答 2
Stack Overflow用户
发布于 2013-04-21 13:58:47
这显然是safari浏览器中的一个问题(主要是在iOS中)。
我修改了你的CSS来解决这个问题。这不是最理想的，但是当浏览器不能正确地呈现东西时，我们必须进行调整。
我删除了.outside和.inside框上的位置关系，并将溢出-x:隐藏添加到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。我在示例代码中增加了背景颜色的对比度。
Stack Overflow用户
发布于 2020-08-02 15:12:12
这可能是iOS重新调整小字体比例的趋势的副作用。
我在使用float: right的标签时遇到了问题；最终this method解决了这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14038362
复制相关文章
相似问题
腾讯云开发者
