HTML 使用 webkit 缩小时出现边框问题
HTML border problems when zoom out with webkit
我有一个容器 div,宽度固定,边框为 1px。它包含两个固定宽度和高度的div,一个向左浮动,另一个向右浮动。我用 box-sizing: border-box
.
可以在这里看到一个例子https://jsfiddle.net/joker777/6r9dc5pw/5/
问题是当我缩小时边框尺寸会增加,并且它会缩小容器内的 space,因为我使用 border-box
。这导致两个浮动 div 的 space 不足。
#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>
我有一个容器 div,宽度固定,边框为 1px。它包含两个固定宽度和高度的div,一个向左浮动,另一个向右浮动。我用 box-sizing: border-box
.
可以在这里看到一个例子https://jsfiddle.net/joker777/6r9dc5pw/5/
问题是当我缩小时边框尺寸会增加,并且它会缩小容器内的 space,因为我使用 border-box
。这导致两个浮动 div 的 space 不足。
#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>