html5边框宽度撑开,解决“有边框的子元素宽度设定绝对值后，缩放浏览器会错位”的两种方法...

现象:

用浮动布局时， 如果为子元素的宽度指定绝对值，并且子元素具有边框，在缩放浏览器的时候会出现错位现象。

这种现象产生的原因是：

浏览器缩放时，子元素父元素的内容都等比例缩放，而子元素的边框不能等比例缩放，在缩放到达一定程度后，会造成子元素大于父元素，从而产生错位现象。

举例：

width: 400px;

background-color: pink;

}

.wrapper::after {

content: '';

display: block;

clear: both;

}

.wrapper > div {

float: left;

height: 200px;

/* box-sizing: border-box;*/

}

.wrapper > div.left {

width: 99px;

border-right: 1px solid #ccc;

background-color: orange;

}

.wrapper > div.right {

width: 300px;

background-color: lightblue;

}

&lt持环开行打进对端架处参触架码我通会法时果;div class="wrapper"&直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如gt;

left

right