Question

菜单上有这个恼人的问题。在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>

Answer 1

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

至于为什么它超过了它的容器，这可能是由于Firefox，Chrome和IE之间的默认填充/边距不同。如果是这种情况，只需在padding: 0; margin: 0; border: 0，ul和li上设置a。

Answer 2

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

从原来的小提琴中剔除了那些胆量。抱歉。

看了之后，我没有感觉到关于位置的解释：关于DOM中下一个相对父级的继承，绝对是问题是非常正确的，所以我试着修改“类似于桌子的“你已经到位的结构。”

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

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

我会更多地看一下这个，因为我已经使用了一段时间来强制某些布局，例如菜单结构等。

好问题@dasmikko！

Answer 3

您是否将填充设置为0？

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

Answer 4

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

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

设置为100％的宽度超出了Firefox中的容器

4 个答案: