浏览器放大更改了我的li宽度

Question

当我从100%放大到90%或更小时，我的li宽度从229px变为更大的值。有人知道如何躲避吗。

Chrome和Firefox就是这样。IE9-IE11是很好的

感谢您的帮助或建议。

    <div class="product_section">
                    <ul class="list_product">
                        <li>
                            <a href="#">
                                <div class="product_frame" style="background-image: url(http://image.haier.com/pk/nv/consumer/refrigerator/tfnf/201208/P020121130740687231395.png);"></div>
                                <div class="product_name">
                                <p>dfddfdfd<br />dfdffd</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
                                <div class="product_name">
                                <p>dfddfdfd<br />dfdffd</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
                                <div class="product_name">
                                <p>dfddfdfd<br />dfdffd<br />dfdffd</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
                                <div class="product_name">
                                <p>dfddfdfd<br />dfdffd</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
                                <div class="product_name">
                                <p>dfddfdfd<br />dfdffd<br />dfdffd</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="product_frame" style="background-image: url(cupload/product/product_1.jpg);"></div>
                                <div class="product_name">
                                <p>dfddfdfd<br />dfdffd</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
    .product_section {
        display: inline-block;
        margin: 15px;
        width: 725px;
    }
    .product_frame {
        display: inline-block;
        margin: 0;
        padding: 0;
        width: 229px;
        height: 229px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .product_name {
        display: table;
        vertical-align: middle;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100px;
    }
    .product_name p {
        display: table-cell;
        vertical-align: middle;
        text-align: left;
        padding: 10px;
    }
    ul.list_product {
        display: inline-block;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
    }
    ul.list_product li {
        display: inline-block;
        margin: 8px;
        width: 229px;
        height: 329px;
        float: left;
        border: 1px solid #eeeeee;
        border-radius: 5px;
        position: relative;
    }
    ul.list_product li:nth-child(3n - 2) {
        margin-left: 0;
    }
ul.list_product li:nth-child(3n) {
    margin-right: 0;
}

https://jsfiddle.net/pocnjpf9/1/

/更新/

阅读完上一篇文章后：缩放更改设计布局我注意到它很可能是由边界引起的。

通过将框大小调整：border-box应用于li来解决问题。

Answer 1

添加以下CSS代码将解决您的问题。

*, *:before, *:after {
    box-sizing: border-box;
}

演示：https://jsfiddle.net/pocnjpf9/2/