0

私が現在取り組んでいるウェブサイトはこちらでご覧いただけます。
非常に古いスタイルですが、私の顧客がこのように設計したので、彼が望むように実装しているだけです... 心配しないでください。
問題は、Internet Explorer 7 (7 のみ) では、マウスが上にあるときに上部のナビゲーション バーが消えることです...
正確には、最初の要素以外はすべて消えます。なんらかの理由で最初のものは残ります...何が起こっているのか手がかりが得られません。私が使用すべき何らかのcssトリックがあるに違いないと確信しています!
これが私のcssです（ナビゲーションバーに関連するもののみ）。 

/*Relevant part*/
.navigation-menu-wrapper {
    height: 143px;
    max-height: 143px;
    width: 829px;
}

.navigation-menu {
    list-style: none;
}

.navigation-menu-item {
    float: left;
    background-color: rgba(255, 255, 255, 0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#99FFFFFF', endColorstr='#99FFFFFF'); /*IE 7/8 fix for rgba*/
    width: 163px;
    height: 143px;
    max-height: 143px;
    font-family: "Times New Roman";
    color: #000000;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 143px;
    border: 1px solid #000000;
    margin: 0;
    padding:0;
}

.navigation-menu-item-selected {
    background-color: rgba(255, 255, 255, 1);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFFFFFFF'); /*IE 7/8 fix for rgba*/
}


/*End relevant part*/
/*Page CSS, just in case you need it*/

.page-wrapper {
    width: 1024px;
    height: 100%;
    max-height: 100%;
    min-height: 768px;
}

.center-content-wrapper {
    width: 824px;
    min-height: 768px;
    background-image: url("../../img/background.jpg");
    background-repeat: no-repeat;
}

.main-content-wrapper {
    width: 100%;
    min-height: 623px;
    max-height: 623px;
}

.main-content-overlay {
    margin: 25px;
    padding-left: 70px;
    padding-right: 70px;
    padding-top: 20px;
    background-color: rgba(0, 0, 0, 0.85);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d8000000', endColorstr='#d8000000');
    min-height: 509px;
    max-height: 509px;
    height: 509px;
    overflow-y: auto;
    font-size: 14px;
    font-family: "Times New Roman";
}

修正を提案できますか？汚いトリックでも大歓迎です！
ありがとう！

4

2 に答える 2

1

<a>これは、リスト項目をラップしているためです..逆にする必要があります。<li>あなたを包み込む<a>

例として次のようにします。

<ul class="navigation-menu no-margin no-padding">
 <li class="navigation-menu-item single-line"><a class="navigation-menu-item navigation-
 menu-item-selected link-no-decoration" href="index.php">L'attivitá</a>
 </li>

このように動作します..すべてに同じことを行うだけで<li>、IE7で動作します

于 2013-02-27T13:57:58.817 に答える
1

マークアップがめちゃくちゃです。

<ul class="navigation-menu no-margin no-padding">
    <a class="navigation-menu-item navigation-menu-item-selected link-no-decoration" href="index.php">
        <li class="navigation-menu-item single-line">L'at (...)

このコンテキストでは、要素 a を要素 ul の子として使用することはできません。

于 2013-02-27T13:58:06.507 に答える