Question

我的CSS菜单栏有一点问题。该栏在包括IE10在内的所有其他主流浏览器中都能正常工作，但在IE 8或9中则不行。看起来浮点数或内联块似乎被忽略了。它们显示为彼此堆叠而不是并排堆叠。如果你有IE 8或9，你可以在kitchenova.com上查看问题。我已经制作了菜单栏的jsfiddle：http://jsfiddle.net/bLZzL/

IE总是很痛苦！

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
  font-family:Verdana, Geneva, sans-serif
}
#cssmenu {
    height: 30px;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0 0;
    background: #E0E0E0;
    background: -moz-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #E0E0E0));
    background: -webkit-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
    background: -o-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
    background: -ms-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
    background: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
    border-bottom: 2px solid #EB2226;
    z-index:999;
}
#cssmenu:after,
#cssmenu ul:after {
  display: inline-block;
  float:left;

}
#cssmenu a {
  background: #E0E0E0;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #E0E0E0));
  background: -webkit-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
  background: -o-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
  background: -ms-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
  background: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
  color: #000000;
  display: inline-block;
  font-family: Verdana, Geneva, sans-serif
  font-size: 15px;
  line-height: 29px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #EB2226;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {

}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #BBBDBF 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #BBBDBF));
  background: -webkit-linear-gradient(top, #FFFFFF 0%, #070707 100%);
  background: -o-linear-gradient(top, #FFFFFF 0%, #BBBDBF 100%);
  background: -ms-linear-gradient(top, #FFFFFF 0%, #BBBDBF 100%);
  background: linear-gradient(to bottom, #FFFFFF 0%, #BBBDBF 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: none repeat scroll 0 0 #E5E5E5;
  border-bottom: 1px dotted #000000;
  filter: none;
  font-size: 12px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #EB2226;
  color:#FFF;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}

这是它适用的列表：

<link href="assets/templates/v32029/css/Dropdown_style(8-6-2013).css" rel="stylesheet" type="text/css" />


<div id='cssmenu' style="position:relative;">
<ul>
   <li class='active has-sub'><a href='http://www.kitchenova.com/Bakeware_c_8.html'><span>Bakeware</span></a>
      <ul>
         <li><a href='http://www.kitchenova.com/Measuring-Tools_c_407.html'><span>Measuring Tools</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bBaking%20%26%20Pastry%20Tools'><span>Baking and Pastry Tools</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bCookie%20%26%20Biscut%20Cutters'><span>Cookie and Biscuit Cutters</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bDecorating%20Tools'><span>Decorating Tools</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bPans%2c%20Molds%2c%20%26%20Sheets'><span>Pans, Molds, and Sheets</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bBaking%20Dishes'><span>Baking Dishes</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bSilicone%20Bakeware'><span>Silicone Bakeware</span></a></li>
         <li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bMixing%20%26%20Prep%20Bowls'><span>Mixing and Prebowls</span></a></li>
      </ul>

Answer 1

在HTML代码上使用上面的一个表

<link href="assets/templates/v32029/css/Dropdown_style(8-6-2013).css" rel="stylesheet" type="text/css" />

只需将其宽度设置为100％

IE8 IE9下拉菜单内联错误

1 个答案: