1

ここで奇妙な問題が発生しています。

コードペン: http://codepen.io/anon/pen/yFbAs

979 ピクセルを超えるサイズに変更すると、ナビゲーション メニュー ('#nav' div) は div '#logo' とインラインで、その中央に垂直に表示されます。これは、ページが最初にロードされたときに問題ないように見えます。(ただし、codepen はデフォルトで <979px になるため、自分で試してみない限り、それを確認することはできません)

979px を超えるサイズに変更すると、「#nav」div が新しい行に表示されます。これは、「#nav」または「#logo」がインライン ブロックにリセットされず、代わりに「ブロック」要素のままであるように見えます。ただし、クロム開発者ツールで何が起こっているかを確認すると、「インラインブロック」に適切にリセットされているようです。私のデザインの問題ですか？

どんな洞察も大歓迎です！

ありがとう

4

2 に答える 2

3

あなたのcssにこの編集を試してください

http://codepen.io/anon/pen/vHypu 

#header {
    font-family: 'Montserrat', sans-serif;
    padding:5px;
    clear:both;
}

#header #logo {
    float:left;
    font-family: Georgia;
    font-size:3em;
    font-style: italic;
}
@media only screen and (min-width: 650px) and (max-width: 979px) {

  #header #logo {
      display:block;
      text-align:center;
      float:none;
}
于 2013-09-06T13:38:11.443 に答える
1

Firefox では発生しないため、Chrome のレンダリング バグのように見えますが、

それを回避する方法は、ロゴも左にフロートさせることです

ここに作業中の編集ペンがあります http://codepen.io/anon/pen/ovBge

于 2013-09-06T13:37:22.920 に答える