1

私は最近、IE8/IE9 で厄介な問題に遭遇しました (驚くべきことに、IE7 では問題が発生するはずです)。http://targettedmedia.co.uk/httpdocsをチェックしてください。

Firefox/Chrome またはその他の最新のブラウザーでわかるように、トップ メニューにカーソルを合わせると、サブメニュー項目は (1 行または 2 行の項目に関係なく) 垂直方向に中央揃えにする必要があります。しかし、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 に答える