0
這是我的測試頁面。下拉式CSS導航不會在IE 9中呈現
http://mymsaa.org/test_ie9.php
這只是帶來了我的注意，該頁面不能在IE「渲染」正確9.
我沒有IE 9所以我用這個網站來預覽我的測試頁 - http://netrenderer.com
這是我的CSS & HTML。
任何幫助，將不勝感激。
<style type="text/css">
/*NAVIGATION*//*NAVIGATION*//*NAVIGATION*/
.about_msaa_nav { margin-left: -67px; }
.ms_button { min-width: 172px !important; max-width: 172px; }
.how_button { min-width: 219px !important; max-width: 219px; }
.living_button { min-width: 168px !important; max-width: 168px; }
.donate_button { min-width: 118px !important; max-width: 118px; }
.get_button { min-width: 151px !important; max-width: 151px; }
.swim_button { min-width: 154px !important; max-width: 154px; }
.about_button { min-width: 157px !important; max-width: 157px; border-right: 0px white solid !important; }
#container {
margin: 0 auto;
max-width: 1200px; }
#hide_nav { display: none; }
.toggle, [id^=drop] {
display: none; }
nav {
margin: 0;
padding: 0; }
nav:after {
content: ""; display: table; clear: both; }
nav ul {
float: left; padding: 0; margin: 0; list-style: none; position: relative; }
nav ul li {
margin: 0px; display: inline-block; float: left;
}
nav li a {
display: block;
padding-top: 8px; padding-bottom: 8px; text-align: center;
color: #FFF !important;
font-size: 17px;
background-color: #0c579f;
text-decoration: none; font-weight:normal !important;
border-right: 1px solid white;
border-bottom: 1px solid white; }
nav ul li ul li:hover { background: #ef3e42; }
nav li a:hover { background-color: #ef3e42; }
nav li li a {
border-right: 0px solid white;
font-size: 13px; text-align: left; padding-left: 23px; padding-right: 23px;
display: block;
background: #0255a1;
position: relative;
z-index:200;
border-bottom: 1px solid white;
color: white; text-decoration: none; font-weight:normal !important; }
nav li li li a {
background: #c3e0e8;
z-index:200; color: black !important; }
nav li li li a:hover {
color: white !important; }
nav ul ul {
display: none;
position: absolute; }
nav ul li:hover > ul { display: inherit; }
nav ul ul li {
width: 225px;
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -38px;
left: 225px;
}
li > a:after { content: ' '; }
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 992px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav { margin: 0; }
.toggle + a,
.menu { display: none; }
.toggle {
display: block;
padding: 8px 24px;
color: #FFF !important;
font-size: 17px;
background-color: #0c579f;
text-decoration: none; font-weight:normal !important; margin-bottom: -0px;}
.toggle:hover { background-color: #ef3e42; }
[id^=drop]:checked + ul { display: block; }
nav ul li {
display: block;
width: 100%; }
nav ul ul .toggle,
nav ul ul a { }
nav ul ul ul a { }
nav ul ul ul a {
border-right: 0px solid white;
font-size: 13px;
display: block;
background: #ef3e42;
position: relative;
z-index:200;
border-bottom: 1px solid white;
color: white; text-decoration: none; font-weight:normal !important; }
nav ul li ul li .toggle,
nav ul ul a {
border-right: 0px solid white;
font-size: 13px;
display: block;
background: #0c579f;
position: relative;
z-index:200;
border-bottom: 1px solid white;
color: white; text-decoration: none; font-weight:normal !important; }
nav ul ul {
float: none;
position: static;
color: #ffffff; }
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }
nav ul ul li {
display: block;
width: 100%; }
nav ul ul ul li { position: static;
}
}
@media all and (max-width : 330px) {
nav ul li {
display: block; width: 100%;
}
}
/*992px*//*992px*//*992px*//*992px*/
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.about_msaa_nav { margin-left: -98px; }
.ms_button { min-width: 143px !important; max-width: 143px; }
.how_button { min-width: 188px !important; max-width: 188px; }
.living_button { min-width: 139px !important; max-width: 139px; }
.donate_button { min-width: 92px !important; max-width: 92px; }
.get_button { min-width: 125px !important; max-width: 125px; }
.swim_button { min-width: 126px !important; max-width: 126px; }
.about_button { min-width: 126px !important; max-width: 126px; border-right: 0px !important; }
nav li a {
padding-top: 10px; padding-bottom: 10px; border-right: 1px solid white; font-size: 16px;text-decoration: none; font-weight: normal !important; color: white; }
nav ul ul ul li {
position: relative;
top: -43px;
left: 225px;
}
}
/*768px*//*768px*//*768px*//*768px*/
@media only screen and (min-width: 768px) and (max-width: 992px) {
.about_msaa_nav { margin-left: 0px; }
.swim_button { min-width: 100% !important; max-width: 100%; text-align: left !important; padding-left: 25px; }
#hide_nav { text-align: center; display: block; background-color: white; }
#hide_nav:hover { background-color: #0255a1; cursor: hand !important;}
nav li a { margin-top: -0px;
border-right: 0px solid white; border-bottom: 0px solid white; }
nav li li li a {
background: #c3e0e8;
z-index:200; color: black !important; }
}
/*480px*//*480px*//*480px*//*480px*/
@media only screen and (min-width: 480px) and (max-width: 768px) {
.about_msaa_nav { margin-left: 0px; }
.swim_button { min-width: 100% !important; max-width: 100%; text-align: left !important; padding-left: 25px; }
#hide_nav { text-align: center; display: block; background-color: white; }
#hide_nav:hover { background-color: #0255a1; cursor: hand !important;}
nav li a { margin-top: -0px;
border-right: 0px solid white; border-bottom: 0px solid white; }
nav li li li a {
background: #c3e0e8;
z-index:200; color: black !important; }
}
/*320px*//*320px*//*320px*//*320px*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
.about_msaa_nav { margin-left: 0px; }
.swim_button { min-width: 100% !important; max-width: 100%; text-align: left !important; padding-left: 25px; }
#hide_nav { text-align: center; display: block; background-color: white; }
#hide_nav:hover { background-color: #0255a1; cursor: hand !important;}
nav li a { margin-top: -0px;
border-right: 0px solid white; border-bottom: 0px solid white; }
nav li li li a {
background: #c3e0e8;
z-index:200; color: black !important; }
}
/*NAVIGATION*//*NAVIGATION*//*NAVIGATION*/
</style>
<!--NAVIGATION MENU-->
<nav>
<!--MENU TOGGLE-->
<label for="drop" class="toggle" id="hide_nav" style="margin-top: -80px; width: 45px; height: 90px; margin-bottom: -10px; padding: 10px; border-right: 0px solid black; border-bottom: 0px solid black;">
<img src="http://mymsaa.org/wp-content/uploads/2016/03/hamburger.jpg" style="margin-top: 17px;" alt="Navigation Toggle"></label>
<input type="checkbox" id="drop" />
<!--MENU TOGGLE-->
<ul class="menu">
<!--MS Information-->
<li>
<label for="drop-1" class="toggle">MS Information</label>
<a href="#" class="ms_button">MS Information</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="http://mymsaa.org/ms-information/overview/">MS Overview & Glossary</a></li>
<li><a href="http://mymsaa.org/ms-information/newly-diagnosed/">Newly Diagnosed</a></li>
<li><a href="http://mymsaa.org/ms-information/symptoms/">Symptoms</a></li>
<li><a href="http://mymsaa.org/ms-information/treatments/">Treatments</a></li>
<li><a href="http://mymsaa.org/ms-information/search/">S.E.A.R.C.H.™ for Treatment Options</a></li>
<li><a href="http://mymsaa.org/ms-information/prescription-assistance">Prescription Assistance Programs</a></li>
<li><a href="http://mymsaa.org/ms-information/publications/">Publications</a></li>
<li><a href="http://mymsaa.org/news/">Latest News from MSAA</a></li>
<li><a href="http://mymsaa.org/ms-information/videos/">MSi Videos</a></li>
<li><a href="http://mymsaa.org/msaa-help/helpline-chat/">Toll-Free Helpline & Chat</a></li>
<li><a href="http://mymsaa.org/ms-information/spanish">Information in Spanish</a></li>
<li><a href="http://mymsaa.org/ms-information/faqs/">FAQs</a></li>
</ul>
</li>
<!--MS Information-->
<!--How MSAA Can Help-->
<li>
<label for="drop-2" class="toggle">How MSAA Can Help</label>
<a href="#" class="how_button">How MSAA Can Help</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="http://mymsaa.org/msaa-help/helpline-chat/">Toll-Free Helpline & Chat</a></li>
<li><a href="http://mymsaa.org/ms-information/publications/">Publications</a></li>
<li><a href="http://mymsaa.org/ms-information/videos/">MSi Videos</a></li>
<li><a href="http://mymsaa.org/msaa-help/cooling-products/">Cooling Products</a></li>
<li><a href="http://mymsaa.org/msaa-help/assistive-equipment/">Assistive Equipment</a></li>
<li><a href="http://mymsaa.org/msaa-help/mri/">MRI Access Fund</a></li>
<li><a href="http://mymsaa.org/msaa-help/educational-programs/">Educational Programs</a></li>
<li><a href="http://mymsaa.org/msaa-help/shared-management-tools/">Shared-Management Tools</a></li>
<li><a href="http://mymsaa.org/msaa-help/lending-library/">Lending Library</a></li>
<li><a href="http://mymsaa.org/msaa-help/overall-wellness/">Overall Wellness</a></li>
<li><a href="http://aquatics.mymsaa.org/" target="_new">Online Aquatic Center</a></li>
<li><a href="http://mymsaa.org/msaa-help/faqs/">FAQs</a></li>
</ul>
</li>
<!--How MSAA Can Help-->
<!--My MSAA Community-->
<li>
<label for="drop-3" class="toggle">Living with MS</label>
<a href="#" class="living_button">Living with MS</a>
<input type="checkbox" id="drop-3"/>
<ul>
<li><a href="http://mymsaa.org/msaa-community/my-msaa-community-forum">My MSAA Community</a></li>
<li><a href="http://blog.mymsaa.org/" target="_new">MS Conversations Blog</a></li>
<li><a href="http://mymsaa.org/journey/" target="_new">My MS Journey</a></li>
<li><a href="http://mymsaa.org/msaa-community/mobile/">My MS Manager™ mobile app</a></li>
<li><a href="http://relapses.mymsaa.org/" target="_new">MS Relapse Resource Center</a></li>
<li><a href="http://healthinsuranceguide.mymsaa.org/" target="_new">My Health Insurance Guide</a></li>
<li><a href="http://resources.mymsaa.org/" target="_new">My MS Resource Locator®</a></li>
<li><a href="http://mymsaa.org/msaa-help/overall-wellness/">Overall Wellness</a></li>
<li><a href="http://aquatics.mymsaa.org/" target="_new">Online Aquatic Center</a></li>
<li><a href="http://mymsaa.org/msaa-help/educational-programs/">Educational Programs</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=Networking">Networking Program</a></li>
</ul>
</li>
<!--My MSAA Community-->
<!--Donate-->
<li>
<label for="drop-4" class="toggle">Donate</label>
<a href="#" class="donate_button">Donate</a>
<input type="checkbox" id="drop-4"/>
<ul>
<li><a href="https://secure2.convio.net/msaa/site/Donation2?df_id=5421&5421.donation=form1&autologin=true">Make a Donation</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Honor_Memorial_Donations">Honor & Memorial Donations</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer/?pagename=rv16_become_Monthly_Donor">Become a Monthly Donor</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer/?pagename=rv16_PlannedGiving">Planned Giving</a></li>
<li> <label for="drop-5" class="toggle">Other Ways to Give</label>
<a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Other_Ways_Give">Other Ways to Give</a>
<input type="checkbox" id="drop-5"/>
<!--Other Ways to Give-->
<ul>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Wedding_Occasion_Favors">Wedding & Occasion Favors</a></li>
<li><a href="http://mymsaa.careasy.org" target="_new">Vehicle Donation</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Matching_Gifts">Matching Gifts</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Create_A_Tribute">Create a Tribute</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv_16_Shop_Support">Shop & Support</a></li>
</ul>
<!--Other Ways to Give-->
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Donation_FAQ">FAQs</a></li>
</ul>
</li>
<!--Donate-->
<!--Get Involved-->
<li>
<label for="drop-6" class="toggle">Get Involved</label>
<a href="#" class="get_button">Get Involved</a>
<input type="checkbox" id="drop-6"/>
<ul>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Volunteer">Volunteer</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Special_Events">MSAA Special Events</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Create_Your_Own_Fundraiser">Create Your Own Fundraiser</a></li>
<li><a href="http://mymsaa.org/artshowcase2016/">Art Showcase</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Partnerships">Partnerships</a></li>
<li><a href="http://support.mymsaa.org/site/PageServer?pagename=rv16_Get_Involved_FAQ">FAQs</a></li>
</ul>
</li>
<!--Get Involved-->
<!--Swim for MS-->
<li><a href="http://swimforms.org/" target="_new" class="swim_button">Swim for MS</a></li>
<!--Swim for MS-->
<!--About MSAA-->
<li>
<label for="drop-7" class="toggle">About MSAA</label>
<a href="#" style="border-right: 0px;" class="about_button">About MSAA</a>
<input type="checkbox" id="drop-7"/>
<ul class="about_msaa_nav">
<li><a href="http://mymsaa.org/about-msaa/mission/">Mission and Overview</a></li>
<li><a href="http://mymsaa.org/about-msaa/msaa-news/">MSAA Achievements</a></li>
<li><a href="http://mymsaa.org/about-msaa/contact/">Contact Us</a></li>
<li><a href="http://mymsaa.org/about-msaa/regional/">Regional Offices</a></li>
<li><a href="http://mymsaa.org/about-msaa/board/">Board of Directors</a></li>
<li><a href="http://mymsaa.org/about-msaa/council/">Healthcare Advisory Council</a></li>
<li><a href="http://mymsaa.org/about-msaa/coalition/">MS Coalition</a></li>
<li><a href="http://mymsaa.org/about-msaa/annual-report/">Annual Report</a></li>
<li><a href="http://mymsaa.org/about-msaa/financial/">Financial Information</a></li>
</ul>
</li>
<!--About MSAA-->
</ul>
</nav>
<!--NAVIGATION END-->
你可以測試一個實際的IE9瀏覽器，而不是該網站？ – Aziz