0

我的菜单有这个烦人的问题。在 Firefox 中，“ul”标签超出了它的父容器。在 Chrome 和 IE 中它没有。

我想要什么：我希望下拉菜单的宽度与其父级相同（在 chrome 中打开示例以查看其外观）

例子

<ul>
  <li><a href="/sommer-2013">Sommer 2013</a>
    <ul> <--- This one exceeds it's parent
      <li><a href="/sommer-2013/vinter-2012">Vinter 2012</a></li>
    </ul>
  </li>
  <li><a href="/webshop.html">WEBSHOP</a></li>
  <li><a href="/company.html">COMPANY</a></li>
  <li><a href="/stores.html">STORES</a></li>
</ul>
4

4 回答 4

1

ul是一个块元素，你根本不需要设置宽度 - 默认情况下它已经使用了可用的整个宽度（这将是 100% - 填充）。也是如此li。

至于为什么它超出其容器，这可能是由于 Firefox、Chrome 和 IE 之间的默认填充/边距不同。如果是这种情况，只需设置padding: 0; margin: 0; border: 0,和。ullia

于 2013-01-16T14:33:20.463 回答
1

http://jsfiddle.net/biznuge/2vNpE/12/

从原来的小提琴中挖出胆量。对于那个很抱歉。

看了之后觉得position:absolute is the issue的解释对于DOM中下一个相对父级的继承来说是非常正确的，所以我尝试修改“table-like”的显示模式“你已经建立的结构。

nav{
  /*display: table;*/
}    
nav>ul{ 
  /*display: table-row;*/
}
nav>ul>li{
  /*display: table-cell;*/
}

删除表格后，表格行和表格单元格显示宽度继承突然开始工作。

将对此进行更多研究，因为我已经使用 table 一段时间来强制某些布局，例如菜单结构等。

好问题@dasmikko！

于 2013-01-16T15:47:45.010 回答
0

您是否将填充设置为0？

规范说填充应该不包括宽度（IE 忽略了这一点，似乎 Chrome 在将对象安装到容器时可能会这样做）。

于 2013-01-16T14:32:39.203 回答
0

问题与内部ul绝对定位有关。因为它是绝对定位的，所以相对宽度，即百分比，是相对于文档本身的，而不是相对于它的容器的。根本不设置宽度，并且ul将调整大小以适合其容器。或者换句话说，从 fornav ul和 for规则中删除宽度设置nav ul li ul。

至于为什么这是 Firefox 下的问题，而不是 Chrome，我不知道。建议，有人吗？

于 2013-01-16T14:41:42.117 回答