html - 导航在 ie8 中无法正常工作 - 没有背景颜色 + 子菜单没有内联样式

Question

对CSS和html5比较陌生，用过this创建一个简单的纯 CSS/html5 下拉菜单的教程。不幸的是，在 IE8 中它不能正常工作。 我使用了 HTML shiv，并在我的样式表中为所有 html5 元素赋予了 display:block 样式。

虽然我在 CSS 中指定了这一点，但在 ie8 中，下拉菜单可以正常显示子菜单的悬停颜色，但是没有背景颜色，子菜单没有正确定位或显示为内联样式。

nav ul li{
          display: inline-table; <-- being ignored
          float:left;   <-- being ignored
         }

以及列表的背景颜色(下面使用 colorzilla 生成渐变代码)

nav ul {

background: rgb(87,179,229); Old browsers - doesn't work
background: -moz-linear-gradient(top, rgba(87,179,229,1) 0%, rgba(29,81,145,1) 50%,     rgba(15,52,96,1) 51%, rgba(18,61,114,1) 74%, rgba(89,122,165,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,179,229,1)), color-stop(50%,rgba(29,81,145,1)), color-stop(51%,rgba(15,52,96,1)), color-stop(74%,rgba(18,61,114,1)), color-stop(100%,rgba(89,122,165,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(87,179,229,1) 0%,rgba(29,81,145,1) 50%,rgba(15,52,96,1) 51%,rgba(18,61,114,1) 74%,rgba(89,122,165,1) 100%); /* W3C */filter:     
/* To try and make it work in IE6-9 */
progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b3e5', endColorstr='#597aa5',GradientType=0 ); /* To try and make it work in IE6-9 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b3e5', endColorstr='#597aa5',GradientType=0 ); /* To try and make it work in IE6-9 */



box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table; <-- Not ignored in ie8

                }

有没有人知道如何让它在 IE8 中工作？我读到 ie8 不允许子元素继承 nav/list 层次结构中的样式，但是如果我明确指定样式，它们肯定可以工作吗？是不是 ie8 仍然不能正确识别 nav/ul 标签？

非常感谢所有帮助。

Answer 1

您的 HTML5 shim 正在运行，因为它遵守 nav ul 中的声明，这意味着其他地方有问题。

您对 li 元素使用 inline-table 有什么特别的原因吗？可能值得为 li 尝试 display:block，看看它是否能达到您想要达到的效果。或者，您可以将其更改为 display: table-cell 并移除 float 。

此外，可能值得查看 IE9 中的开发人员工具页面。您可以将其设置为“IE8 模式”，这将为您提供 IE8 的相当准确的近似值，以及查看 IE 所见内容的能力(我发现了一些差异，但不足以克服 IE9 开发人员工具的实用性)。可能有其他内容覆盖了您的设置(例如 IE-only 样式表中更具体的声明)。

附带说明，display: inline-table(或除 block 和内联之外的大多数显示属性)doesn't work in IE7 .如果您需要支持 IE7，请注意。