Question

有这样的结构

<div class="container">
  <aside class="left"></aside>
  <aside class="right"></aside>
</div>

CSS

body, html {
    margin: 0;
    height: 100%;
}

.container {
    height: 100%;
}

aside {
    display: inline-block;
    vertical-align: top;
    height: 100%;
}

.left {
    width: 63%;
    background: red;
}

.right {
    width: 37%;
    background: blue;
}

在窗户上一切都很好。在Mac OS上，右侧有一条1px的白线，位于蓝色块的末尾。在窗口上，例如观察时增加或减少浏览器中的缩放。请帮忙摆脱这条线。

JsFiddle DEMO

更新 - 我收获了downvote，因为你没有看到这个问题。但是我看到了.. Mac OS Mountain Lion，我在Safari中看到了，抱歉没有关于浏览器的警告。

您还可以看到site，请看右侧横幅col，您会看到问题

Answer 1

将百分比与像素混合（在这种情况下，容器的左侧填充，如您的小提琴中所示）通常会导致这种舍入问题。为容器选择％padding，或将其添加到CSS：

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

编辑：根据提供的链接，建议使用以下样式：

.post-cols {display: table}
.post-main-col, .banner-col {display: table-cell;}

Answer 2

对，我想我已经找到了你。除75％外，适用于Chrome的所有Zoom。

.main-section{
   margin-right: 64px; //Was 65px
 }

希望这有帮助。

道格。

Mac OS中的神秘缩进1px

2 个答案: