Chrome和Safari忽略的位置是：絕對

Question

看一看http://www.habitatlandscape.co.uk/

在Firefox，甚至的Internet Explorer（！），在彈出的菜單出現完美的，垂直居中的白色帶，並始終從最左側開始。

在Chrome中，菜單在父項li下水平啓動，且不是垂直居中。我可以通過將webkit用於不同的位置來固定垂直對齊，但我無法修復水平對齊。

爲什麼Webkit忽略position:absolute;left:0;？

CSS：

#header #menu 
{ 
margin:0; 
padding:0; 
} 

#header #menu ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
margin-top:28px; 
height:24px; 
} 

#header #menu ul li 
{ 
display:inline; 
position:relative; 
} 

#header #menu ul li a 
{ 
display:block; 
float:left; 
padding:7px; 
padding-bottom:3px; 
background:#fff; 
margin-right:5px; 
text-decoration:none; 
-webkit-border-top-left-radius: 5px; 
-webkit-border-top-right-radius: 5px; 
-moz-border-radius-topleft: 5px; 
-moz-border-radius-topright: 5px; 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
font-family:'museo', serif; 
font-size:12px; 
text-transform:uppercase; 
color:#fff; 
font-weight:bold; 
padding-left:12px; 
padding-right:12px; 
background:#01973D; 
position:relative; 
z-index:2; 
} 

#header #menu ul li:hover a 
{ 
background:#00BB4A; 
} 

#header #menu ul li ul 
{ 
clear:both; 
display:none; 
position:absolute; 
top:39px; 
width:700px; 
margin:0; 
padding:0; 
} 

#header #menu ul li ul li 
{ 
display:block; 
} 

#header #menu ul li ul li a 
{ 
background:#fff !important; 
color:#000; 
font-weight:normal; 
padding:7px; 
padding-left:11px; 
color:#01973D; 
padding-top:10px; 
margin:0; 
float:left; 
} 

#header #menu ul li ul li a:hover 
{ 
color:#000; 
} 

#header #menu ul li:hover ul 
{ 
display:block; 
} 

HTML（CMS生成）：

<div id="menu"> 
<ul> 
    <li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/about-us/"><span>About Us</span></a> 
    <ul> 
    <li><a href="http://www.habitatlandscape.co.uk/about-us/"><span>Company History</span></a></li> 
    <li><a href="http://www.habitatlandscape.co.uk/about-us/meet-the-team/"><span>Meet The Team</span></a></li> 
    </ul> 
    </li> 
    <li class="parent"><a class="menuactive parent" href="http://www.habitatlandscape.co.uk/portfolio/"><span>Portfolio</span></a> 
    <ul> 
    <li><a href="http://www.habitatlandscape.co.uk/portfolio/"><span>View before, during and after photos from recent projects</span></a></li> 
    </ul> 
    </li> 
    <li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/services/"><span>Services</span></a> 
    <ul> 
    <li><a href="http://www.habitatlandscape.co.uk/services/design/"><span>Design</span></a></li> 
    <li><a href="http://www.habitatlandscape.co.uk/services/patios/"><span>Patios</span></a></li> 
    <li><a href="http://www.habitatlandscape.co.uk/services/decking/"><span>Decking</span></a></li> 
    <li><a href="http://www.habitatlandscape.co.uk/services/turf/"><span>Turf</span></a></li> 
    <li><a href="http://www.habitatlandscape.co.uk/services/ponds/"><span>Ponds</span></a></li> 
    <li><a href="http://www.habitatlandscape.co.uk/services/driveways/"><span>Driveways</span></a></li> 
    <li><a href="http://www.habitatlandscape.co.uk/services/fencing/"><span>Fencing</span></a></li> 
    <li><a href="http://www.habitatlandscape.co.uk/services/electrics/"><span>Electrics</span></a></li> 
    <li><a href="http://www.habitatlandscape.co.uk/services/garden-structures/"><span>Structures</span></a></li> 
    </ul> 
    </li> 
</ul> 
// etc 
</div> 

Answer 1

你已經創造了一個爛攤子display:inline -ing你的<li>元素，但display:block-你的<a>元素。

在HTML中，它是無效的窩在一個內聯元素塊級元素：

<span><div>FAIL</div></span> 

當你做這樣的事情，你將不得不跨瀏覽器的問題。這同樣如果你使用CSS來改變display屬性：

<div style="diplay:inline"><span style="display:block">STILL A FAIL</span></div> 

哪個是你做了什麼：

#header #menu ul li { 
    display: inline; 
    /* ... */ 
} 
#header #menu ul li a { 
    display:block; 
    /* ... */ 
} 

這種行爲或多或少未定義至於規格而言（因爲它沒有任何意義），所以瀏覽器保留做某些瘋狂或荒謬的權利 - 這就是你所看到的。它只適用於Firefox，因爲你運氣很好，它可以在Internet Explorer中使用，因爲Internet Explorer本質上是瘋狂和荒謬的。

如果你想要那些<li>元素水平堆疊，float:left而不是內聯它們。那麼你可以display:block你的<a>元素沒有問題。一旦完成，您仍然必須切換哪些元素是position:relative; -ed，並且可能在某處添加了left:0。

Here's an example of your current issue on jsfiddle，和here's an example of my suggested fix on jsfiddle，其涉及所述#header #menu ul元件定位相對代替#header #menu ul li的。

Answer 2

當我給一個#header #menu ul li它display:inline-block;固定它。它也改變了隱藏的ul的結果top定位，這應該是24px匹配高度，如果按鈕無論如何，對不對？