Question

当我从100％放大到90％或更低时，我的宽度从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/

/ 更新 /

阅读完上一篇文章后：Zoom changes the design layout 我注意到它很可能是由边界引起的。

通过应用box-sizing：border-box来修复问题。

Answer 1

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

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

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

浏览器放大会改变我的宽度

1 个答案: