Firefox 在下拉悬停和导航栏上的额外像素在 IE 8 中不起作用

Question

我正在开发我的第一个网站（我是 n00b），在 Safari 和 Chrome 上，它看起来完全符合我的要求。但是，在 IE 8 中，导航栏根本不起作用。在 Firefox 中，当您将鼠标悬停在其中一个链接上时，它会下拉下拉框，但会在主导航栏和子链接之间添加一个额外的像素。

我的网站网址是：http://tonerleague.x10.mx/basketball.html

我的 HTML 是...：

<div class="menu">
<nav>
<ul>
    <li><a href="#">Main</a>
        <ul>
            <li><a href="#">Advertise</a></li>
        </ul>
    </li>
    <li><a href="#">Test</a>
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">TestTest</a></li>
            <li><a href="#">TestTestTest</a></li>
        </ul>
    </li>
    <li><a href="#">Unknown</a>
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Forums</a></li>
</ul>
</nav>
</div>

我的 CSS 是..：

.menu
{
left: 50%;
position: absolute;
top: 137px;
margin-left:-500px;
font-family:"Arial", Helvetica, sans-serif;
font-size: .875em;
font-weight: bold;
}
    nav ul {
padding: 0;
border-radius: 0px; 
list-style: none;
position: relative;
display: inline-block; 
    }
nav ul:after {
    content: ""; clear: both; display: block;
}

    nav ul ul {
display: none;
    }

nav ul li:hover > ul {
    display: block;
}
    nav ul li {
float: left;
line-height: normal;
-moz-border-radius: 0;  
    }
nav ul li:hover {
    /*background:#C0C0C0; ** Firefox causes another extra pixel when activated*/
    line-height: normal;
    -moz-border-radius: 0;  

}
    nav ul li:hover a {
        color: #FFF;
    }

nav ul li a {
    display: block; padding: 5px 35px;
    color: #FFF; text-decoration: none;
    border-right: 0px solid #FFF;
    -moz-border-radius: 0;  
}
nav ul ul {
background-color: #C0C0C0; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
line-height: normal;
-moz-border-radius: 0;  
    }
nav ul ul li {
    float: none; 
    border-top: 0px solid #FFF; 
    border-bottom: 0px solid #000;
    border-right: 0px solid #000;
    border-left: 0px solid #000;
    position: relative;
    line-height: normal;
    -moz-border-radius: 0;  
}
    nav ul ul li a {
        padding: 5px 15px;
        color: #fff;
    }   
        nav ul ul li a:hover {
            background-color: #000000;
        }

Answer 1

SELECT 框不是典型的 HTML 元素。它们与操作系统密切相关，可能难以设置样式，尤其是在 IE8 上。

您可以选择将 SELECT 包装在 DIV 中并设置溢出以包含该元素，或者使用 IE8 特定的 CSS 声明来调整大小。

见：How does one target IE7 and IE8 with valid CSS?

Use "\9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.

Example:

body { 
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}