0

私のCSSは次のとおりです。

#menu {
    background-color: #a40a0a;
    width: 830px;
    height: 36px;
    position: relative;
    top: 39px;
    left: 172px;
}
#menu >ul {
    list-style-type: none;
}
#menu ul li {
    font-family: Arial, Helvatica, Verdana;
}
#menu ul li >a {
    display: block;
    float: left;
    text-decoration: none;
    color: #ffffff;
    line-height: 36px;
    width: 166px;
    text-align: center;
}
#menu ul li >a:hover {
    background-color: #d74343;
    border-bottom: 2px solid #bc1515;
    line-height: 34px;
}
#menu ul li >a:active {
    background-color: #a40a0a;
}

このメニューは正しく表示されませんie7以下。これが間違っている場合は、正しいことを教えてください、ありがとう。

http://jsfiddle.net/a4Qe3/ここにリンクがあります

4

1 に答える 1

1

floatのli代わりに装着する必要がありaます。これは、liが毎回ブロックするためです。

更新されたコードは次のとおりです。

CSS

#menu {
    background-color: #a40a0a;
    width: 830px;
    height: 36px;
    position: relative;
    top: 39px;
    left: 172px;
}
#menu > ul {
    list-style-type: none;
}
#menu ul li {
    font-family: Arial, Helvatica, Verdana;
    float: left;
}
#menu ul li > a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    line-height: 36px;
    width: 166px;
    text-align: center;
}
#menu ul li > a:hover {
    background-color: #d74343;
    border-bottom: 2px solid #bc1515;
    line-height: 34px;
}
#menu ul li > a:active {
    background-color: #a40a0a;
}

デモ

編集1

それぞれがそれぞれに適用されたに包まれているのでfloat、li代わりにを付けます。DOM構造について考える場合、タグをフロートさせると、同じスコープ内にないアイテムが隣り合ってフロートします。彼らはDOM兄弟ではありません。彼らの両親はそうです。だからあなたは彼らの両親をぶらぶらさせているだけです。IE7では、ブロック要素の後にフロートすると、そのフロートされたアイテムは、あなたの場合と同じように押し下げられます。だから私たちがすべきことはアイテムを浮かせることです。aalidisplay: block;ali

これはaタグが浮いているデモliです。タグの周りに境界線を付けて、何が起こっているかを示しています。IE7で確認してください。

于 2012-11-24T23:15:42.610 に答える