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

时间:2015-11-21 16:39:51

标签: html css webkit border-box page-zoom

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

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

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

1 个答案:

答案 0 :(得分:2)

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