CSS / Safari：具有浮动和百分比宽度的 Div 框不是 100% 对齐答案

【问题标题】：CSS / Safari: Div box with float and percentage width is not 100% alignedCSS / Safari：具有浮动和百分比宽度的 Div 框不是 100% 对齐
【发布时间】：2012-12-11 21:07:34
【问题描述】：

在 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>

【问题讨论】：

我也有这个问题，而且只在 Safari 中...

标签： html css

【解决方案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。我使示例代码的背景颜色更加对比鲜明。

【讨论】：

【解决方案2】：

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

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

【讨论】：