0

私は基本的なウェブサイトのヘッダーを持っており、内部にはロゴが左に浮かび、メニューが右に浮かんでいます。

このjsフィドルをチェックしてください http://jsfiddle.net/RjHxR/6/

メニューは横型なので項目に当てはめfloat:leftました。#main_menu liしかし、メニューもレスポンシブにしたいので、特定の画面サイズのアイテムに適用float: noneしまし#main_menu liた。これらの画面サイズに標準の垂直メニューが必要なためです（js fiddle cssを参照）。Google Chromeをその解像度にサイズ変更すると、問題ないように見えます。しかし、ブラウザのサイズをより高い解像度に戻そうとすると、その解像度に指定されていても、#main_menu liアイテムはオンのままです! そして、それはChromeでのみ発生します。jsfiddle で自分で試してみてください。float: nonefloat: left

どんな助けでも大歓迎です。

4

2 に答える 2

1

ページが検証され、webkit ブラウザーで問題が解消されることを修正すると、nav リストでアンカー タグが閉じられなくなります: http://jsfiddle.net/panchroma/PUmyx/。

なぜそのブリップがその効果をもたらすのか考えてみてください ;)

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>
于 2013-06-09T16:38:13.097 に答える
1

display:list-itemChrome は、Chrome スタイル シートから自動的に li を提供します。したがって、float:left を削除して再び float を有効にすると、デフォルトの display:list-item があり、リストのままになります。

ここに画像の説明を入力

探している効果を得るには、display属性inlineをデフォルトにしてから、次display:list-itemのようにメディア条件内に変更します。

#main_menu li {
    display: inline;
    margin-left: 10px;
}
@media screen and (max-width: 600px) {
    #main_menu li {
        display:list-item;
    }
    #header { width: 100%;}
}
于 2013-06-09T16:08:10.687 に答える