0

我遇到了一种非常特殊的行为，尤其是对于我认为是一段简单的代码！基本上，我正在尝试“定位：相对；” 我页面底部的页脚导航。在 chrome 中，它正确地位于底部。在 FF（或任何其他非 webkit 浏览器）中，它不在页面底部，而几乎在页面顶部。如果我更改一个 CSS 行（位置：相对于位置：绝对；）它适用于所有浏览器，但在我调整屏幕大小或放大/缩小时它不会正确浮动。我已经在“样板”HTML/CSS 中确认了这一点，并且所有正确的浏览器也重置了，并且得到了相同的行为。这一切都在 Windows 7 中。下面是两个非常短的 HTML 和 CSS 片段。为什么不是 这工作吗？任何关于如何获得简单的页脚导航以跨浏览器工作并使其在放大/缩小时正确浮动的任何解决方案都将不胜感激！

 <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 的具体情况，您可能需要对此进行调整。

至于相对与绝对的细节，我无法改进这个讨论：Position Relative vs Position Absolute？

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 回答