Browser zoom in changes my li width

Question

When I zoom in from 100% to 90% or less, my li width changes from 229px to a larger value. Does anyone knows how to avoid.

It happens with Chrome and Firefox. IE9 - IE11 are fine

Your help or suggestion is appreciated.

    <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/

/ UPDATE /

After finished reading a previous post: Zoom changes the design layout I have noticed that it's most likely caused by the border.

By applying box-sizing: border-box to the li fixes the problem.

Can you provide an image of what you want to achieve? Your jsfiddle code seems messy. — Alberto I.N.J., Jun 26 '15 at 16:17
When you check my jsfiddle with 100% zoom, you will see 3 li on one row with another 3 li on the second row. If you zoom in to 90%, the 3rd li will drop to the second row (assuming you are using Chrome or Firefox). I want to keep my layout without being affected by zooming. I didn't clean up my css coz I am not sure if it is triggered by other setting. Thanks — Michael Eugene Yuen, Jun 26 '15 at 16:23

score 1 · Accepted Answer · answered Jun 26 '15 at 16:27

1

Adding the following code of CSS will solve your problem.

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

Demo: https://jsfiddle.net/pocnjpf9/2/

answered Jun 26 '15 at 16:27

Usman Arshad

868
8
19

Bingo. I just found the answer from another post http://stackoverflow.com/questions/7835287/zoom-changes-the-design-layout. Thanks!!! – Michael Eugene Yuen Jun 26 '15 at 16:28
You are welcome, don't forget to accept the answer :) – Usman Arshad Jun 26 '15 at 16:30

Browser zoom in changes my li width

1 Answers1