3

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

4

2 回答 2

0

这显然是 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 。我使示例代码的背景颜色更加对比鲜明。

于 2013-04-21T05:58:47.397 回答
0

这可能是 iOS 重新调整小字体的趋势的副作用。

我在使用浮动标签时遇到问题：对；最终通过这种方法解决。

于 2020-08-02T07:12:11.930 回答