你能告诉我为什么我的CSS不能在IE 7/8中格式化吗？

Question

我有一个网站（http://www.wapc.org），可以在Firefox，Safari和Chrome中完美格式化，但在IE 7/8中看起来有所不同。

主导航（菜单栏）不保留正确的大小/定位，下拉菜单（级联菜单）在IE中也无法正常使用。

以下是问题的屏幕截图：

以下是它应该是什么样的截图（Firefox）：

关于可能导致此问题的任何想法？谢谢:)）

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;
}

Answer 1

我猜主要的问题是你的菜单是浮动的，没有定义宽度，尝试添加一个。

你的下拉工作如何？