CSS下拉菜单不适用于IE和Chrome

我有一个下拉菜单，它不适用于Internet Explorer 10（和兼容模式）和Chrome。它确实适用于Firefox（最新版本）。CSS下拉菜单不适用于IE和Chrome

CSS：

#menu_items 
{ float: left; 
    width: 600px; 
} 
    #menu 
{ margin:0; 
    float: left; 
} 
#menu li 
{ 
    padding: 0 0 0 0px; 
    list-style: none; 
    margin: 2px 0 0 0; 
    display: inline; 
    background: transparent; 
} 
#menu li a{ 
    float: left; 
    font: bold 120% Arial, Helvetica, sans-serif; 
    text-align: center; 
    color: #FFF; 
    text-decoration: none; 
    height: 24px; 
    text-shadow: 0px 1px 0px #000; 
    padding: 16px 0px 10px 40px; 
    background: transparent; 
} 
#menu li ul li a { 
    float: left; 
    font: bold 90% Arial, Helvetica, sans-serif; 
    text-align: center; 
    color: #FFF; 
    text-decoration: none; 
    height: 24px; 
    text-shadow: 0px 1px 0px #000; 
    padding: 16px 0px 10px 40px; 
    background: transparent; 
} 
#menu li:hover ul { 
    display: flex; 
    float:inherit; 
    text-shadow: 0px 1px 0px #000; 
    padding: 1px 40px 0px 0px; 
    background: #669CD8; 
    background: -moz-linear-gradient(#90B9E2, #4B75AF); 
    background: -o-linear-gradient(#90B9E2, #4B75AF); 
    background: -webkit-linear-gradient(#90B9E2, #4B75AF); 
    margin: 50px 0px 0px 0px; 
    border-style:solid; 
    border-width:1px; 
    z-index: 2; 
} 
#menu li ul { 
    display: none; 
    position: absolute; 
} 
#menu li.current a, ul#menu li:hover a 
{ 
    color: #FFF; 
    text-decoration: underline; 
}

HTML：

<div id="menu_items"> 
     <ul id="menu"> 
     <li class="current"><a href="index.html">Home</a></li> 
     <li><a href="werkwijze.html">Werkwijze</a></li> 
     <li><a href="#">Producten</a> 
      <ul> 
       <li><a href="klimaat.html" id="klimaat">Klimaat</a></li> 
       <li><a href="voerbakken.html" id="voerbakken">Voerbakken</a></li> 
       <li><a href="voerinstallatie.html" id="voerinstallatie">Voerinstallatie</a></li> 
       <li><a href="kraamhokken.html" id="kraamhokken">Kraamhokken</a></li> 
       <li><a href="boxen.html" id="boxen">Boxen</a></li> 
       <li><a href="bighok.html" id="bighok">Biggen hokken</a></li> 
       <li><a href="roosters.html" id="roosters">Roosters</a></li> 
       <li><a href="silos.html" id="silos">Silo's</a></li> 
      </ul> 
     </li> 
     <li><a href="contact.html">Contact</a></li> 
     </ul> 
    </div>

来源

2013-07-09 selten98

你的一些CSS语法不支持浏览器如chrome和Internet Explorer ..像-moz-linear-gradient等 –

因此为什么还有-o-linear-gradient和-webkit-linear-gradient – selten98

你可以吗更具体的什么不工作？我没有看到FF w/http://jsfiddle.net/8LaLa/中的任何工作。 – KatieK

在规则#menu li:hover ul中，使用display: block;而不是display: flex;。（请参阅演示http://jsfiddle.net/8LaLa/1/。）

display: flex不受所有浏览器支持 - 请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility。

来源

2013-07-09 19:28:52 KatieK

作品！谢谢！ – selten98

你的菜单可能无法正常结算。你有很多浮动元素，这可能会导致你的渲染错误。当你浮动一个元素时，你将该元素“流出”。基本上，元素将忽略它在DOM中的位置，并尝试滑向您在浮动中设置的一侧。如果包装中的所有子元素都浮动，则父级不再知道应该有多高（因为所有元素都没有流动），并且它将自身设置为0px高度或最高流入元素的高度。要解决这个问题，你需要一个clearfix。这将告诉浏览器使容器清除其子项。希望这能解决你的问题！

来源

2013-07-09 19:05:13

增加了clearfix，仍然没有解决问题。 – selten98

CSS下拉菜单不适用于IE和Chrome

回答

相关问题