你能告訴我爲什麼我的CSS不能在IE 7/8中格式化嗎？

我有一個網站（http://www.wapc.org），在Firefox，Safari和Chrome中完美格式化，但在IE 7/8中看起來不同。你能告訴我爲什麼我的CSS不能在IE 7/8中格式化嗎？

主導航（菜單欄）不保留正確的大小/位置，下拉菜單（級聯菜單）在IE中也不起作用。

這裏的問題的截圖：

enter image description here

下面是它應該是什麼樣子（Firefox）的截圖：

enter image description here

上什麼可能導致此任何想法？謝謝:)

HTML：

<div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-157" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-157"><a href="http://www.wapc.org/">Home</a></li> 
<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://www.wapc.org/information/">Information</a> 
<ul class="sub-menu"> 
    <li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172"><a href="http://www.wapc.org/information/for-you-your-family/">For You &#038; Your Family</a></li> 

    <li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"><a href="http://www.wapc.org/information/for-animals/">For Animals</a></li> 
    <li id="menu-item-171" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-171"><a href="http://www.wapc.org/information/for-medical-professionals/">For Medical Professionals</a></li> 
    <li id="menu-item-169" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-169"><a href="http://www.wapc.org/information/for-educators/">For Educators</a></li> 
    <li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-170"><a href="http://www.wapc.org/information/for-media/">For Media</a></li> 
</ul> 
</li> 
<li id="menu-item-152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-152"><a href="http://www.wapc.org/resources/">Resources</a> 
<ul class="sub-menu"> 

    <li id="menu-item-153" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153"><a href="http://www.wapc.org/resources/brochures-fact-sheets/">Brochures &#038; Fact Sheets</a></li> 
    <li id="menu-item-154" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-154"><a href="http://www.wapc.org/resources/order-materials/">Order Materials</a></li> 
    <li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-155"><a href="http://www.wapc.org/resources/links/">Links</a></li> 
    <li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"><a href="http://www.wapc.org/resources/yuk-report/">Yuk Report</a></li> 
</ul> 
</li> 
<li id="menu-item-158" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-158"><a href="http://www.wapc.org/about/">About</a> 

<ul class="sub-menu"> 
    <li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"><a href="http://www.wapc.org/about/board-of-directors/">Board of Directors</a></li> 
    <li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"><a href="http://www.wapc.org/about/calendar/">Calendar</a></li> 
    <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="http://www.wapc.org/about/donations/">Donations</a></li> 
    <li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"><a href="http://www.wapc.org/about/employment/">Employment</a></li> 
    <li id="menu-item-163" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-163"><a href="http://www.wapc.org/about/funding/">Funding</a></li> 
    <li id="menu-item-164" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164"><a href="http://www.wapc.org/about/hipaa/">HIPAA</a></li> 

    <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://www.wapc.org/about/history/">History</a></li> 
</ul> 
</li> 
<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166"><a href="http://www.wapc.org/contact/">Contact Us</a></li> 
</ul></div>

CSS：

.custom .menu { 
float: right; 
position: relative; 
margin: -90px 15px 0 0; 
background: -moz-linear-gradient(top, #595959 12%, #161616 57%, #131313 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(12%,#595959), color-stop(57%,#161616), color-stop(100%,#131313)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #595959 12%,#161616 57%,#131313 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #595959 12%,#161616 57%,#131313 100%); /* Opera11.10+ */ 
background: -ms-linear-gradient(top, #595959 12%,#161616 57%,#131313 100%); /* IE10+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#595959', endColorstr='#131313',GradientType=0); /* IE6-9 */ 
background: linear-gradient(top, #595959 12%,#161616 57%,#131313 100%); /* W3C */ 
border-radius: 4px 4px 4px 4px; 
} 

.custom .menu .current a, a:hover { 
border-radius: 4px; 
} 

.custom .menu a { 
background: transparent; 
} 

.custom .sub-menu .menu-item { 
border: none; 
background: #333333; 
}

來源

2011-08-18 Trent Scott

在此處張貼您的相關代碼。 – Mrchief

剛剛添加，謝謝！ –

相應的HTML在哪裏？ – Sparky

我想主要的問題是，你有你的浮動菜單沒有定義它的寬度，嘗試添加一個。

您的下拉菜單是如何工作的？

來源

2011-08-18 06:25:45 MatTheCat

你能告訴我爲什麼我的CSS不能在IE 7/8中格式化嗎？

回答

相關問題