Question

您可以在here看到我正在工作的网站我知道，这是非常古老的风格，但我的客户以这种方式设计它，我只是按照他想要的方式实现它......别担心，你不会长时间看它！问题是，当鼠标悬停在它上面时，顶部的导航栏在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";
}

你能建议修复吗？即使是肮脏的伎俩也会非常感激！谢谢！

Answer 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中起作用

Answer 2

你的标记搞砸了。

<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的子元素。

列表元素在ie7中消失

2 个答案: