Question

我最近在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;
    }

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

CSS里面的CSS垂直对齐锚点 - IE8 / IE9问题

1 个答案: