#menu li {
display: block;
float: left;
}
#menu li a {
display: block;
background: transparent; /* IE6 will love this! */
height: 33px;
line-height: 33px;
text-align: center;
width: 60px;
}
#menu li a:hover {
background: transparent url(images/menu_hover.jpg) repeat-x bottom; /* oh, oh, a fix here, transparent added */
}
我会这样做。
但如果没有一个真实的例子，我很难判断这一点。和迈克尔一样，如果不起作用，请告诉我。
另外，jsFiddle 或指向实际站点的链接会很好。
好吧，我举个例子……
http://jsfiddle.net/dpCwp/
如您所见，div#bugged 中有您的代码版本不起作用，而我的 - div#fixed。是的，它们不使用图像，但正如您所见，#bugged 无论如何都不能使用颜色。
以防万一，一个带有背景图片的工作版本 - http://jsfiddle.net/dpCwp/3/
嗯，刚刚在 internet-explorer6/7/8/9 和最新版本的 opera、safari、chrome、chrome、firefox 上进行了测试——就像一个魅力（加载远程图像时的延迟除外.. )
只是为了让事情更清楚......这绝不是与webkit或其他任何相关的错误，这是对css的不当使用！
已更新，以反映您的实际 CSS
你的 CSS
#menu {
float: left;
background: url(images/menu_normal.jpg) repeat-x bottom;
}
#menu li {
display: inline;
/*background: url("../images/menu_normal.png") no-repeat scroll 0 0 transparent;*/
float: left;
height: 33px;
line-height: 33px;
text-align: center;
width: 60px;
}
#menu a:hover {
display: inline;
background: url(images/menu_hover.jpg) repeat-x bottom;
float: left;
height: 33px;
line-height: 33px;
text-align: center;
width: 60px;
}
#menu a:active {
display: inline;
background: url(images/menu_active.jpg) repeat-x bottom;
float: left;
height: 33px;
line-height: 33px;
text-align: center;
width: 60px;
}
必须替换为：
#menu {
float: left;
background: url(images/menu_normal.jpg) repeat-x bottom;
}
#menu li {
display: block;
float: left;
/* lots of useless stuff have been removed from this rule and moved to next rule (#menu li a) */
}
#menu li a {
/* you haven't added this rule in your CSS, it's essential! */
display: block;
background: transparent; /* IE6 will love this! */
height: 33px;
line-height: 33px;
text-align: center;
width: 60px;
/* see properties added from #menu li, to here... */
}
#menu li a:hover {
background: transparent url(images/menu_hover.jpg) repeat-x bottom;
/* useless stuff removed again */
}
#menu li a:active {
background: transparent url(images/menu_active.jpg) repeat-x bottom;
/* and we don't need those tags here again... */
}
- 我删除的 CSS 属性是必不可少的，我添加的也是。规则也一样！
- 我已经从
:hover、:active 伪类中删除了所有属性，因为它们是从#menu li a 继承的，而您的CSS 中根本没有这些属性。
更新 2
所以我刚刚更改了 #menu 与 Chrome 相关的规则（！您无法正常工作的浏览器）在这些地方：
#menu { float: left; }
#menu ul { overflow: auto; margin: 0; padding: 0; }
#menu li { display: block; float: left; background: url(images/menu_normal.jpg) repeat-x bottom; }
#menu li a { display: block; background: transparent; height: 33px; line-height: 33px; text-align: center; width: 60px; }
#menu li a:hover { background: transparent url(images/menu_hover.jpg) repeat-x bottom; }
#menu li a:active { background: transparent url(images/menu_active.jpg) repeat-x bottom; }
而且它完美地工作！所以，我要再说一遍，那不是错误，那是无效的 CSS。