使用 webkit 缩小时出现 HTML 边框问题答案

【问题标题】：HTML border problems when zoom out with webkit使用 webkit 缩小时出现 HTML 边框问题
【发布时间】：2016-02-24 01:47:17
【问题描述】：

我有一个固定宽度和 1px 边框的容器 div。它包含两个具有固定宽度和高度的 div，一个向左浮动，另一个向右浮动。我用box-sizing: border-box。

可以在这里看到一个例子https://jsfiddle.net/joker777/6r9dc5pw/5/

问题是当我缩小时边框尺寸会增加并且它会减少容器内的空间，因为我使用border-box。这导致两个浮动 div 没有足够的空间。

【问题讨论】：

除非有理由将#left-box 和#right-box 的宽度设置为像素，否则我建议您将宽度设置为百分比来解决此问题。

标签： html css webkit border-box zooming

【解决方案1】：

#container {
    width: 700px;
    border: 1px solid;
    overflow: hidden;
    box-sizing: border-box;
}

#left-box {
    width: 21.7%;
    height: 150px;
    float: left;
    box-sizing: border-box;
}

#right-box {
    width: 78.3%;
    height: 150px;
    float: right;
    border-left: 1px solid;
    box-sizing: border-box;
}

<div id="container">
    <div id="left-box"></div>
    <div id="right-box"></div>
</div>

【讨论】：