某些浏览器中不需要的自动换行 - 为什么渲染方式不同？

Question

我正在开发一个网站的菜单问题。以下是不同浏览器中菜单的外观。

Chrome 5

Opera 10

Firefox 4 Beta 2

Internet Explorer 8

Chrome中的菜单看起来不错，但在某些浏览器中，小箭头会被包裹到下一行。此外，在Firefox和IE中，菜单项与箭头重叠。我该如何解决这个问题？

您可以在此处找到样式表，HTML源代码和所有爵士乐： http://labs.pieterdedecker.be/vspwpg/

Answer 1

文件style.css中的

在width:100%

中添加ul#menu > li > ul li

Answer 2

这是因为浮动：位于菜单项后面的范围内，其中包含双箭头（类sf-sub-indicator）。浮动它将允许内容与它们现在的方式重叠，因为它将元素从流中取出。

你会在这里找到浮动元素背后的理论：http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 3

嗯，如果你将小箭头“＆gt;＆gt;”的跨度改为此

，该怎么办？

ul#menu > li > ul > li a > span.sf-sub-indicator {
margin-left:5px;
position:absolute;
right:5px;
}

然后在li

中添加更多填充权限

ul#menu > li > ul li {
...
padding-right:20px;
...
}

它适用于FF，但我不确定其他人