0

IE7でテストすると、最初のマウスオーバーでメニューが揺れ、位置がわずかに変わります。また、サブメニューを含むメニュー項目にカーソルを合わせると、メニューが再び揺れます。どちらの問題もIE7hasLayoutに関係していると思いますが、よくわかりません。

JSFiddle

メニューおよびサブメニュータグのIE7のcssにhasLayoutを確保する方法はありますか？または、IE7にテキストノードが何らかの形で挿入されていますか？ご協力ありがとうございました。

4

1 に答える 1

1

確かにあなたは正しいです。IE7のhasLayoutの問題だったようです。

CSSのプロパティを変更しました。

#nav {
    margin: 70px 0px 0px -15px;
    padding: 0px;
    list-style: none;
    font-size: 14px;
    position: relative;
}

#nav li a {
    display: inline-block; /* changed it to inline-block for IE compatibility */
    width: 195px; /* declared width since it's now inline-block */
    padding: 0 0 0 15px; /* total width 210px with padding */
    text-decoration: none;
    line-height:20px; /* vertical center with line-height instead */
    color: #262626;
    height: 20px;
}

.subnav {
    margin: -26px 0 0 ;
    padding: 0;
    list-style: none;
    position: absolute;
    display: none;
    left:196px;
    background: #201d1e;
    width: 325px;
}

/* same idea as (#nav li a) */
.subnav a {
    display: inline-block;
    color: #fff !important;
    padding: 0 0 0 15px;
    width: 310px;
    line-height:20px;
    height: 20px;
}

サブメニューは、最新のブラウザーよりも数ピクセル高くレンダリングされますが、.subnavの-26pxはIE7スタイルシートで調整できます。マージントップに近いと思います：IE7の場合は-10px。これがうまくいくことを願っています。

http://jsfiddle.net/marioluevanos/VAuYx/11/

于 2011-11-05T06:09:29.007 に答える