1

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

在 Firefox 甚至 Internet Explorer (!!!) 中，弹出式菜单完美地显示出来，在白色条带中垂直居中，并且总是从最左侧开始。

在 Chrome 中，菜单在 parent 下水平开始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>
4

2 回答 2

3

你已经通过display:inline-ing 你的<li>元素但是display:block-ing 你的<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某处添加一个。

这是您当前在 jsfiddle 上的问题的示例，这是我建议的 jsfiddle 修复示例，其中涉及#header #menu ul相对定位元素而不是#header #menu ul li.

于 2013-04-03T18:06:42.053 回答
0

当我给它时，它修复#header #menu ul li了display:inline-block;它。它还改变了隐藏 ultop定位的结果，如果按钮无论如何都应该是 24px 以匹配高度，对吧？

于 2013-04-03T17:52:19.383 回答