1

我最近在 IE8/IE9 中遇到了一个令人讨厌的问题（令人惊讶的是，它应该在 IE7 中对齐）。请查看http://targettedmedia.co.uk/httpdocs

正如您在 Firefox/Chrome 或其他现代浏览器中看到的那样，将鼠标悬停在顶部菜单上时，子菜单项应垂直居中（无论是一行还是两行）。然而，在 IE8 和 IE9 中它只是不想工作。我尝试编辑代码但无济于事。

你能帮我么？处理它太令人沮丧了。我真诚地提前感谢您！

这是一个示例 HTML 子菜单结构：

<ul id="nav" class="dropdown dropdown-horizontal">
    <li><a href="#">Health &#038; Safety Courses</a>
        <ul class="sub-menu">
            <li><a href="#">NEBOSH National Diploma</a></li>
            <li><a href="#">NEBOSH Construction Certificate</a></li>
            <li><a href="#">NEBOSH Fire Certificate</a></li>
            <li><a href="#">NEBOSH Distance Learning Couse</a></li>
            <li><a href="#">IOSH Managing Safely</a></li>
            <li><a href="#">IOSH Working Safely</a></li>
            <li><a href="#">Site Managers Safety Training Scheme</a></li>
            <li><a href="#">Health &#038; Safety Awareness for Employees</a></li>
            <li><a href="#">Health &#038; Safety Awareness for Managers</a></li>
        </ul>
    </li>
</ul>

以下是处理垂直对齐的特定 CSS 位：

ul.dropdown ul {
 width:400px;
 padding:20px 0 25px 7px;
 background:#6c6c6c;
 font-size:14px;
 font-weight:normal;
}

    ul.dropdown ul li {
     font-weight: normal;
     height:42px;
     line-height:42px;
     float:left;
     margin:0 0 0 15px;
     border-top:1px solid #484848;
    }

    ul.dropdown ul li a:link {
        display:inline-block;
        width:165px;
        padding:0;
        color:#fff;
        text-align:left;
        line-height:normal;
        vertical-align:middle;
    }
4

1 回答 1

1

避免依赖vertical-align: middle，因为许多浏览器不支持它。相反，删除所有的填充和边距，并为其本身ul.dropdown ul li a:link添加填充。<li>如果您在顶部和底部添加相等的填充（我也会在 em 中进行填充，这样无论您的用户将文本设置为什么大小，填充率看起来都是一样的）它将在周围相等。

ul.dropdown ul li {
    border-top: 1px solid #484848;
    float: left;
    font-weight: normal;
    height: 2em;
    margin: 0 0 0 15px;
    padding: 1em 0;
}

ul.dropdown ul li a {
    color: #FFFFFF;
    padding: 0;
    text-align: left;
    width: 165px;
}
于 2012-06-19T16:56:28.643 回答