CSS在IE和Chrome中表现不同

Question

我正在尝试创建一个小的导航菜单，但IE似乎以不同的方式呈现它，完全弄乱了它。

这是我正在使用的html / css（jsfiddle正确呈现它，chrome也是如此）：

http://jsfiddle.net/Seytonic/gmp975sm

然而IE渲染它（我省略了jsfiddle中的bootstrap）：

编辑：我正在使用IE 11

Answer 1

这就是为什么在浮动元素上声明宽度很重要的一个原因。如果不这样做，则不同浏览器的框尺寸可能会有所不同。

尝试将width: 330px添加到#navigation容器。

Revised Demo 1

330px就是例如。您也可以使用相对单位，如百分比或ems。

同样，为了避免不可预测的浏览器行为，还要为两个浮动的子元素指定宽度：

#navbar li { width: 49.5%; }

然后调整顶行框之间的间距：

#projects { margin-left: .5%; }
#about { margin-right: .5%; }

最后，width默认情况下仅包含content box。还使用box-sizing: border-box对填充和边框进行说明：

html {  box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit;}

Revised Demo 2