Question

我有一个CSS下拉菜单，适用于大多数浏览器，但不适用于XP上的某些旧版IE。除非我的许多学生仍然使用这种浏览器，因此我不太关心，因此使用该网站的能力有限。在这些较旧的IE浏览器中，仅显示HOME链接。

这是HTML后跟CSS。任何人都可以找出导致问题的原因吗？以下是一些浏览器堆栈截图：http://www.browserstack.com/screenshots/46848552eb08ea8bb0ca0b10c4843ed8cb6cfb3e

HTML

<div id="nav">
<ul id="menu">
    <li class="medial">
        <a href="http://www.anthonyteacher.com/">HOME</a>
    </li>
    <li class="medial">
        <a href="http://www.anthonyteacher.com/about/" title="About AnthonyTeacher.com">ABOUT</a>
    </li>
    <li class="medial">
        <a href="http://www.anthonyteacher.com/portfolio/" title="My Portfolio">PORTFOLIO</a>
    </li>
    <li class="medial"><a href="#" title="Course Homepages">COURSES</a>

        <ul class="sub-menu">
            <li>
                <a href="http://www.anthonyteacher.com/category/courses/2014s-liec/">Low Intermediate Conversation</a>
            </li>
            <li>
                <a href="http://www.anthonyteacher.com/category/courses/2014s-hiec/">High Intermediate Conversation</a>
            </li>
            <li>
                <a href="http://www.anthonyteacher.com/category/courses/2014s-elt/">ELT Practice</a>
            </li>
            <li>
                <a href="http://www.anthonyteacher.com/category/courses/2014s-tesol/">TESOL Practicum</a>
            </li>
            <li>
                <a href="http://www.anthonyteacher.com/oldercourses" title="View Previous Courses">Older Courses</a>
            </li>
        </ul>
    </li>
    <li class="medial"><a href="http://www.anthonyteacher.com/category/studentwork" title="Archive of work my students have done in my courses">STUDENT WORK</a>
    </li>
    <li class="medial"><?php add_thickbox(); ?>
<a href="https://www.google.com/calendar/embed?src=4skddvl4euub3lj8qr88csf058%40group.calendar.google.com&ctz=Asia/Seoul?TB_iframe=true&width=600&height=550" class="thickbox" title="View my course schedule">CALENDAR</a>
    </li>
    <li><a href="#">CONTACT</a>

        <ul class="sub-menu">
            <li>
                <a href="mailto:anthony.teacher@yahoo.com">anthony.teacher@yahoo.com</a>
            </li>
            <li>
                <a class="smcf-link" href="http://www.anthonyteacher.com/email-me/">Contact Form</a>
            </li>
        </ul>
    </li>
    <li class="social"><a href="http://www.facebook.com/anthony.teacherr" target="_blank" title="My Facebook Account for Students"><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Facebook.png" width="35px" alt="Facebook" /></a><a href="http://www.twitter.com/AnthonyTeacher" target="_blank" title="View my ELT-related Tweets"><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Twitter.png" width="35px" alt="Twitter" /></a><a href="http://www.youtube.com/anthonyteacher" target="_blank" title="All my YouTube Videos"><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Youtube.png" width="35px" alt="YouTube" /></a><a href="http://lnkd.in/zkM8DU" target="_blank" title="See my LinkedIn Profile"><img src="http://www.anthonyteacher.com/wp-content/themes/blank2L/images/icons/Linkedin.png" width="35px" alt="LinkedIn" /></a>
</li>
</ul>
</div>

CSS

/* new menu */
#nav {
    background-image:url('http://www.anthonyteacher.com/wp-content/themes/blank2L/menubar.jpg');
    background-repeat:repeat-x;
    font: bold 12px arial;  
    width:100%;
    height: 29px;
}

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li.medial {
        background: url('http://www.anthonyteacher.com/wp-content/themes/blank2L/orangeborder1.gif');
    background-repeat:no-repeat;
    background-position:right;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a {
    text-decoration: none;
    color: #fff;
    padding: 5px;
    display:inline-block;
    margin-top: 2px;
    margin-right: 5px;
    margin-left: 5px;
}
ul#menu li a:hover {
    background: #555555;
    color: #fff
}

/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    background-color: #fff;
    border: 1px solid black;
    position: absolute;
    top: 28px;
    margin-left: 10px;
    margin-top: -10px;
    width: auto;
    padding: 5px;

}
ul#menu li ul.sub-menu li a {
        color: #000;
        font-weight:normal;
}
ul#menu li ul.sub-menu li a:hover {
        color: #000;
        font-weight:normal;
        background-color: #ff0000;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
ul#menu li.social {
    list-style: none;
    float: right;
    margin-top: 5px;
}
ul#menu li.social a {
    margin: -11px -5px;
    }
ul#menu li.social a:hover {
     background: none;
    }

Answer 1

考虑使用selectivizr.com之类的内容。

正如@jeff指出的那样，早期的IE构建本身不支持:hover以外的<a>。假设你的学生开启了javascript（除非他们真的处于黑暗时代），Selectivizr应该修复你的问题而不需要改变任何东西。

CSS下拉列表在旧的IE浏览器中无效

1 个答案: