解決「有邊框的子元素寬度設定絕對值後，縮放瀏覽器會錯位」的兩種方法

現象:

用浮動佈局時， 若是爲子元素的寬度指定絕對值，而且子元素具備邊框，在縮放瀏覽器的時候會出現錯位現象。
這種現象產生的緣由是：
瀏覽器縮放時，子元素父元素的內容都等比例縮放，而子元素的邊框不能等比例縮放，在縮放到達必定程度後，會形成子元素大於父元素，從而產生錯位現象。

舉例：

<style>

.wrapper {
        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;
    }
</style>

<div class="wrapper">

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

正常顯示效果：

縮小爲本來67%後產生錯位：

解決方法一：

利用box-sizing屬性的border-box.[border-box:指定寬度和高度（最小/最大屬性）肯定元素邊框box。也就是說，對元素指定寬度和高度包括padding和border的指定。內容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的"寬度"和"高度"屬性計算]
css：
<style>

.wrapper {
        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;
    }
</style>

縮放50%後的效果

解決方法二：

將子元素浮動，即兩個元素不在一個文檔流中，從而避免產生錯位
CSS：
<style>

.wrapper {
        width: 400px;
        background-color: pink;
    }
    .wrapper > div {
        height: 200px;
    }
    .wrapper > div.left {
        width: 99px;
        border-right: 1px solid #ccc;
        background-color: orange;
        float: left;
    }
    .wrapper > div.right {
        margin-left: 100px;
        width: 300px;
        background-color: lightblue;
    }
</style>

縮放30%後的效果: