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

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图像的图像/菜单项-BG-悬停纹理2.png正在917像素。尝试为此图像设置一些像素宽度，而不是将宽度设置为100％。

这是我做的。 打开开发人员工具，并将上述图像的widht更改为大约50 px。有效。

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; 
} 

而且你可以删除相应的.radial_gradient CSS和<img />从HTML。