0

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

ie8 中的子菜单显示下拉菜单和悬停颜色，但没有背景颜色，即使我在 CSS 中指定了子菜单，子菜单也无法正确定位或显示为内联样式。

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 不允许子元素继承导航/列表层次结构中的样式，但如果我明确指定样式，它们肯定可以工作吗？是ie8还是不能正确识别nav/ul标签吗？

非常感谢所有帮助。

4

2 回答 2

0

在您的页面中添加此 js 代码，它在 ie 中定义 html5 元素

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
于 2013-02-26T11:41:55.877 回答
0

您的 HTML5 shim 正在工作，因为它尊重 中的声明nav ul，这意味着还有其他问题。

您使用inline-table这些li元素有什么特别的原因吗？s可能值得尝试display: block，li看看它是否适用于您想要达到的相同效果。或者，您可以将其更改为display: table-cell并删除浮动。

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

附带说明，display: inline-table（或除块和内联之外的大多数显示属性）在 IE7 中不起作用。如果您需要支持 IE7，请注意。

于 2013-02-26T16:08:32.517 回答