Question

我的问题在于菜单。菜单中只有1个.active class li元素.active样式将自身应用于菜单右侧的每个li元素。这个问题只出现在IE7中。到目前为止，我已经尝试更改选择器，修改html，我甚至重新安排规则，希望它能够得到解决。

链接： http://julianjosephs.com/FQBM_NEW/

的 HTML

<div class="menu">
    <ul>
      <li class="active"><a href="index.html"><span>ACCUEIL </span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /><img src="images/menu-divider.png" alt="" class="menu_divider" /></li>
      <li><a href="Historique.html"><span>HISTORIQUE </span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /><img src="images/menu-divider.png" alt="" class="menu_divider" /></li>
      <li><a href=""><span>EVENEMENTS </span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /><img src="images/menu-divider.png" alt="" class="menu_divider" /></li>
      <li><a href="ListeClubs.html"><span>CLUBS MMA</span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /><img src="images/menu-divider.png" alt="" class="menu_divider" /></li>
      <li><a href=""><span>COMBATTANTS </span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /><img src="images/menu-divider.png" alt="" class="menu_divider" /></li>
      <li><a href="Boutique.html"><span>BOUTIQUE MMA</span></a><img src="images/menu-item-bg-hover-texture-2.png" alt="" class="radial_gradient" /></li>
    </ul>
  </div>

的 CSS

    .menu {
    margin:0;
    width: 963px;
    float:left;
    font-size: 16px;
    height: 64px;
    background: url(images/menu-bg.png) no-repeat;
}
.menu ul {
    text-align: left;
    padding:0px 23px 0 35px;
    *padding:0px 6px 0 16px; /* IE7 hack */
    margin:0;
    list-style:none;
    border:0;
    float:left;
    font-size: 16px;
    width: 917px;
}
.menu ul li { float:left; margin:0; padding:0; border:0; height: 64px; position:relative; }
.menu ul li a { float:left; margin:0; padding:21px 0 0 0;  color:#fff; font:normal 16px Arial, Helvetica, sans-serif; text-decoration:none; height: 64px; position:relative; z-index:3; background:transparent; }
.menu ul li a span { padding:20px 23px; }
.menu ul li a:hover { background: transparent; }
.menu ul li a:hover span {

}
.menu ul li a.active { }

.menu ul li a.active span {  }

.menu ul li .radial_gradient{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    display:none;
    z-index:-1;
}

.menu ul li:hover .radial_gradient{
    display:block;
}

.menu ul li.active .radial_gradient{
    display:block;
}

.menu ul li .menu_divider{
    position:absolute;
    right: -6px;
    top: -4px;
    z-index:2;
}

Answer 1

尝试替换以下样式：

.menu ul li .radial_gradient {
    display:none;
}
.menu ul li.active .radial_gradient {
    display:block;
}

使用：

.menu ul li .radial_gradient {
    visibility:hidden;
}
.menu ul li.active .radial_gradient {
    visibility:visible;
}

Answer 2

看起来URL images / menu-item-bg-hover-texture-2.png上的图片占用了917像素。尝试为此图像设置一些像素宽度，而不是将宽度设置为100％。

这就是我所做的。打开开发人员工具并将上述图像改为大约50像素。它奏效了。

Answer 3

如@JQone所述，您的问题在于将图片放置在li标记中。

更好的解决方案是使用背景图像 - 这样他们仍然可以填充100％的宽度，你只需要包含一次图像。所以你的CSS会变成：

.menu ul li:hover, .menu ul li.active {
    background: url('images/menu-item-bg-hover-texture-2.png') repeat-x 0 0 transparent;
}

您可以从HTML中删除相应的.radial_gradient CSS和<img />。

css显示属性在IE7中无法正常工作。 IE7错误我怀疑

3 个答案: