当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Responsive bug in Chrome with CSS floats while resizing

问题描述:

i have a basic website header and inside i have logo floated to the left and menu floated to the right.

Check out this js fiddle

http://jsfiddle.net/RjHxR/6/

Menu is horizontal, so i applied float:left on #main_menu li items. But, i want to make the menu responsive too, so i applied float: none on #main_menu li items on certain screen sizes, because i want to have a standard vertical menu on those screen sizes (see in js fiddle css). When i resize Google Chrome to that resolution it appears OK. But when i try to resize the browser back to higher resolution, #main_menu li items remain on float: none, even though float: left is specified for that resolution! And it happens only in Chrome. Try it yourself on the jsfiddle.

Any help is appreciated.

网友答案:

You have unclosed anchor tags in your nav list, once you fix that the page validates and the problem disappears in webkit browsers: http://jsfiddle.net/panchroma/PUmyx/.

Go figure why that blip would have that effect ;)

HTML

<div id="header">
<div id='logo'>LOGO</div>
<nav>
    <ul id="main_menu">
        <li><a href='#'>HOME</a></li>
        <li><a href='#'>PAGES</a></li>
        <li><a href='#'>BLOG</a></li>
        <li><a href='#'>WORK</a></li>
        <li><a href='#'>ELEMENTS</a></li>
                        <li><a href='#'>CONTACT US</a>

        </li>
    </ul>
</nav>
</div>
网友答案:

Chrome is automatically giving the li display:list-item from the Chrome Style sheet. So when you remove the float:left and re-enable the float it has the default display:list-item and will stay as a list.

To get the desired effect your looking for, make the display attribute inline as default and then change to display:list-item inside your media condition like so:

#main_menu li {
    display: inline;
    margin-left: 10px;
}
@media screen and (max-width: 600px) {
    #main_menu li {
        display:list-item;
    }
    #header { width: 100%;}
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: