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

当我从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/

/更新/

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

通过对box应用box-sizing：border-box可以解决此问题。