html - ie8 打破 float :left into 2 rows

Question

http://demo.jashwant.com/derek/

我在 .navicon 中有“float:left”。

预期行为:所有图标( Logo 旁边)应位于同一行(适用于 ff、chrome、safari)

但是不知道什么原因，第5个和第6个图标在ie8的另一行/

附注我已经尝试清除它，溢出:隐藏并在容器#bloguin_navpanel上显式设置宽度，但没有成功。

我无法重现问题，所以链接网站本身。

Answer 1

有时 float 并不是在所有浏览器中都是完美的。由于您在导航中使用图像，因此浏览器可能会在加载图像之前过早呈现工具栏，从而导致一些连续的图像换行到另一行。

为了解决这个问题:

1. 将#bloguin_navpanel 设置为float:left。
2. 然后将(.navicon)中的每一项设置为display:inline-block(去除 float )。
3. 最后，将您的#bloguin_mainnav 设置为overflow:auto。

此外，从 .navicon 的任何其他内部子项中删除所有重复的宽度和高度内容。