11

Webkitブラウザ（Chrome / Safari）、CSS3メディアクエリ、displayおよびfloat自分のサイトで問題が発生しました。nav私のウェブページのデフォルトのスタイルは、要素を右にフロートさせることdisplay:inline-blockです。ウィンドウのサイズがモバイルサイズに変更されると、メディアクエリはウィンドウのスタイルを次のように変更しますfloat:none; display:block。この問題は、ブラウザのサイズを通常に戻すと発生します。ナビゲーション要素は、その高さの分だけドロップダウンして表示されます。ここにいくつかの写真とマークアップがあります：

ウィンドウが正常でサイトが正しく表示されている： ウィンドウが正常でサイトが正しく表示されている：

ウィンドウモバイルサイズ、サイトが正しく表示される： ウィンドウモバイルサイズ、サイトが正しく表示される

ウィンドウのサイズが通常に戻り、サイトが正しく表示されない： ここに画像の説明を入力してください

これが通常のスタイルですnav（そして、はい、IE7のものを別のスタイルシートに移動します...）

nav {
    text-align:center;
    float:right;
    display:inline-block;
    *display:inline;
    zoom:1;
    margin-top:30px;
    *margin-top:-70px;
}

これがスタイルを変更するメディアクエリですnav：

@media screen and (max-width:480px) 
{   
     header nav 
     {
         margin:0;
         float:none;
         display:block;
     }
}

それで、これはWebkitのバグですか、それとも予想される動作ですか？私は何か間違ったことをしていますか、それともWebkitですか？それがバグである場合、誰かが良い回避策を知っていますか？ライブサイトはこちらです。もう情報を提供する必要がある場合はお知らせください。ありがとう。

4

1 に答える 1

7

私はそれをこれに減らしました：http：//jsbin.com/opawal/

  • より広いウィンドウから始めます480px。
  • より小さくし480pxます。
  • より大きくし480pxます。
  • 「ジャンプ」が発生しました-それを明確にするために、F5を押してください。

バグです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {
    display: inline-block;
}
nav {
    float: right;
}
@media screen and (max-width:480px) {
    nav {
        float: none;
    }
}
</style>
</head>
<body>
<h2>h2 element</h2>
<nav>nav element</nav>
</body>
</html>
于 2011-07-03T02:34:07.537 に答える