0

特に単純なコードと思われるものについて、非常に奇妙な動作に遭遇しました。基本的に、私は「position:relative;」を試みています。ページの下部にあるフッター ナビゲーション。クロムでは、正しく下にあります。FF (またはその他の Webkit 以外のブラウザー) では、ページの下部ではなく、ほぼ上部に表示されます。1 つの CSS 行 (position:relative to position:absolute;) を変更すると、すべてのブラウザーで機能しますが、画面のサイズを変更したりズームイン/ズームアウトしたりすると、正しくフロートしません。「ボイラー プレート」HTML/CSS でこれを確認し、すべての適切なブラウザーもリセットして、同じ動作を得ています。これはすべて Windows 7 にあります。以下に、HTML と CSS の 2 つの非常に短いスニペットを示します。なぜだ」これは機能していますか？シンプルなフッター ナビゲーションをブラウザー間で機能させ、ズームイン/ズームアウトしたときに正しくフロートさせる方法についての解決策は大歓迎です!

 <ul id="avmenu">
  <li class="current"><a href="first.html">First page</a></li>
  <li><a href="second.html">Second page</a></li>
  <li><a href="third.html">Third page</a></li>
  <li><a href="fourth.html">Fourth page</a></li>
  <li><a href="fifth.html">Fifth page</a></li>
</ul>

ul#avmenu {
margin: 35px 0;
padding: 0;
font: 12px Verdana;
list-style-type: none;

position:relative; <---As is this works in chrome only.  JUST CHANGE THIS to position:absolute and it works in all browsers but it doesn't float well resizing or zooming.

top:70%;  <--This only works ONLY in CHROME when above position:relative.  Work improperly whhn position: absolute.
*left:20%;
}

ul#avmenu li {
display: inline;
}

ul#avmenu li a {
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
color: #47a;
text-decoration: none;
}
4

1 に答える 1

2

これが役立つかどうかを確認してください：http://jsfiddle.net/panchroma/u9qtd/

これを実現するために、ボディをフルハイトにしたことがわかります。実際のページで UL を囲むものの詳細に応じて、これを調整する必要がある場合があります。

相対対絶対の詳細については、この議論を改善することはできません:位置相対対位置絶対?

CSS

html, body {
height: 100%;
} 

ul#avmenu {
margin: 35px 0;
padding: 0;
font: 12px Verdana;
list-style-type: none;

position:relative; 

top:70%; 
left:20%;   
}

ul#avmenu li {
display: inline;
}

ul#avmenu li a {
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
color: #47a;
text-decoration: none;
}
于 2013-03-20T23:56:40.703 に答える