Chrome导航列表在CSS / HTML中带有媒体查询的定位错误

Question

This might be a Chrome/webkit rendering bug, but I want to check if I'm doing something wrong first.

I have a simple UL/LI navigation, each LI is inline-block to appear horizontally. The UL is text-align: right. The 2nd to last element is positioned absolute to the top right corner of the page. The last element is positioned relative to push it down a little bit.

For mobile devices (max-width 400px) there is a media query to reset elements into a standard top-down stacked list, 100px wide.

If you load the page in the wide screen width, everything is fine. If you load the page in the mobile screen width, everything is fine. But if you start in the mobile screen width, and extend your width, Chrome will render the list elements in a broken way : element Five will appear on the next line , even though there is plenty of room to fit next to the other elements.

HTML:

<ul>
    <li>li One</li>
    <li>li Two</li>
    <li>li Three</li>
    <li class="abs">li Four</li>
    <li class="last">li Five</li><!-- This element should always appear to the right of "Three" in the wide screen width -->
</ul>

CSS:

ul {
    background: lightblue;
    padding: 20px 0;
    text-align: right;
}

li {
    display: inline-block;
    padding: 5px;
    background: blue;
    color: white;
    min-width: 50px;
    margin-right: 10px;
}

li.abs {
    position: absolute;
    top: 0px;
    right: 0px;    
    z-index: 9;
}

.last {
    position: relative;
    top: 10px;
    margin: 8px;
}

@media (max-width: 400px) {
    ul li {
        display: block;
        width: 100px;
    }

    li.abs {
        position: static;   
    }

    .last {
        position: static;
        margin: 0;
    }
}

Expected Output:

Actual Output (after resizing window):

Firefox has no problems at all. This is Chrome 31. Simplified JSFiddle Test Case: http://jsfiddle.net/ZE3Kk/4/

Answer 1

try to use float: right for your li's:

li {
display: block;
padding: 5px;
background: blue;
float: right;
color: white;
min-width: 50px;
margin-right: 10px;
}

and just switch all the elements so they will have the order that you need, and it will work after resizing

here is the example with float, now just re-arrange the menu items http://jsfiddle.net/ZE3Kk/6/

Answer 2

I found a workaround here: http://jsfiddle.net/ZE3Kk/8/

li.abs div {
    position: absolute;
    top: 0px;
    right: 0px;    
    width: 60px;
    height: 25px;
    background: red;
    z-index: 9;
}

Solution was to insert a DIV inside the LI, keep the LI position standard, but absolutely position the DIV. By doing this, Chrome does not break the elements when changing media queries.

Update : Found a related Chromium bug that demonstrates this problem in a different way -> https://code.google.com/p/chromium/issues/detail?id=147449