IE8 IE9下拉菜单内联错误 [英] IE8 IE9 drop down menu inline error
本文介绍了IE8 IE9下拉菜单内联错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的CSS菜单栏有一点问题。该栏在包括IE10在内的所有其他主流浏览器中都能正常工作，但在IE 8或9中则不行。看起来浮点数或内联块似乎被忽略了。它们显示为彼此堆叠而不是并排堆叠。如果你有IE 8或9，你可以在kitchenova.com上查看问题。我已经制作了菜单栏的jsfiddle： http://jsfiddle.net/bLZzL/
My CSS Menu bar has a little problem. The bar works fine in all the other major browsers including IE10, but not in IE 8 or 9. It seem like the float or the inline-block is being ignored. They are shown as stacked on top of one another instead of side by side. If you have IE 8 or 9 you can view the problem at kitchenova.com. I have made a jsfiddle of the menu bar: http://jsfiddle.net/bLZzL/
#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;
}
这是它适用的列表：
注意外部样式表是代码以上。
And this is the List it applies to:
Note the external style sheet is the code above.
<link href="assets/templates/v32029/css/Dropdown_style(8-6-2013).css" rel="stylesheet" type="text/css" />
<div id='cssmenu' style="removed: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>
</li>
<li class='has-sub'><a href='http://www.kitchenova.com/Cookware_c_148.html'><span>Cookware</span></a>
<ul>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCookware%3bNon-Stick%20%26%20Specialty%20Cookware'><span>Non-Stick & Specialty Cookware</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCookware%3bSilicone%20Cookware'><span>Silicone Cookware</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCookware%3bMicrowave%20Cookware'><span>Microwave Cookware</span></a></li>
<li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCookware%3bPot%20Racks'><span>Pot Racks</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='http://www.kitchenova.com/Cooks-Tools_c_9.html'><span>Cook's Tools</span></a>
<ul>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bCooking%20Utensils%20%26%20Accessories'><span>Cooking Utensils & Accessories</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bMeasuring%20Cups%20%26%20Spoons'><span>Measuring Cups & Spoons</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bMixing%20%26%20Prep%20Bowls'><span>Mixing & Prepbowls</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bColanders%20%26%20Strainers'><span>Colanders & Strainers</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bCanning%20%26%20Preserving'><span>Canning & Preserving</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bCan%2c%20Jar%2c%20%26%20Bottle%20Accessories'><span>Can, Jar, and Bottle Accessories</span></a></li>
<li><a href='http://www.kitchenova.com/Graters-Zesters-Peelers_c_27.html'><span>Graters, Zesters, and Peelers</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bChoppers%20%26%20Slicers'><span>Choppers & Slicers</span></a></li>
<li><a href='http://www.kitchenova.com/Garnishing-Styling_c_33.html'><span>Garnishing & Styling</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bMeat%20%26%20Seafood%20Tools'><span>Meat & Seafoods</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bSpecialty%20Gadgets'><span>Specialty Gadgets</span></a></li>
<li class='last'><a href='http://www.kitchenova.com/Timers-Thermometers-Scales_c_28.html'><span>Timers, Thermometers , & Scales</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='http://www.kitchenova.com/Cutlery_c_13.html'><span>Cutlery</span></a>
<ul>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bCeramic%20Knives'><span>Ceramic Knives</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bChef%20%26%20Santoku'><span>Chef & Santoku</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bSpecialty%20Cutlery'><span>Specialty Cutlery</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bKnife%20Sets'><span>Knife Sets</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bSharpeners%20%26%20Storage'><span>Sharpeners and Storage</span></a></li>
<li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bCutting%20Boards'><span>Cutting Boards</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='http://www.kitchenova.com/Bar-Cafe_c_10.html'><span>Bar & Cafe</span></a>
<ul>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bAerators%20%26%20Decanters'><span>Aerators and Decanters</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bWine%20%26%20Bar%20Tools'><span>Wine & Bar Tools</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bWine%20Racks%20%26%20Storage'><span>Wine Racks & Storage</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bCoffee%20%26%20Tea'><span>Coffee & Tea</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bBeverage%20Tools'><span>Beverage Tools</span></a></li>
<li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bIce%20Trays'><span>Ice Trays</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='http://www.kitchenova.com/Outdoor-Entertaining_c_12.html'><span>Outdoor & Entertaining</span></a>
<ul>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSOutdoor%20%26%20Entertaining%3bGrilling%20%26%20Camping'><span>Grilling and Camping</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSOutdoor%20%26%20Entertaining%3bPicnic%20%26%20Boating'><span>Picnic & Boating</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSOutdoor%20%26%20Entertaining%3bHerbs%20%26%20Garden'><span>Herbs & Garden</span></a></li>
<li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSOutdoor%20%26%20Entertaining%3bFun%20%26%20Novelty'><span>Fun & Novelty</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='http://www.kitchenova.com/Homekeeping_c_11.html'><span>Homekeeping</span></a>
<ul>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bTabletop%20%26%20Serverware'><span>Tabletop & Serverware</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bPot%20Racks'><span>Pot Racks</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bStorage%20%26%20Organization'><span>Storage & Organization</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bFloor%20Mats%20%26%20Rugs'><span>Floor Mats & Rugs</span></a></li>
<li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bScales'><span>Scales</span></a></li>
<li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bBath%20%26%20Cleaning'><span>Bath & Cleaning</span></a></li>
</ul>
</li>
</ul>
</div>推荐答案
Hi,
I found solution for you main issue
Hi,
I found solution for you main issue
\"They are shown as stacked on top of one another instead of side by side.\"
"They are shown as stacked on top of one another instead of side by side."
On you HTML code you used one TABLE above \"<link href=\"assets/templates/v32029/css/Dropdown_style(8-6-2013).css\" rel=\"stylesheet\" type=\"text/css\" />\" , you just need to set it’s width 100% like
I Checked your HTML and CSS both. You used CSS3 and this is will not work in IE7 and IE8. To use CSS3 properties in IE7 and IE8 you need PIE.htc[^] file.
On you HTML code you used one TABLE above "<link href="assets/templates/v32029/css/Dropdown_style(8-6-2013).css" rel="stylesheet" type="text/css" />", you just need to set it's width 100% like
I Checked your HTML and CSS both. You used CSS3 and this is will not work in IE7 and IE8. To use CSS3 properties in IE7 and IE8 you need PIE.htc[^] file.
这篇关于IE8 IE9下拉菜单内联错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
