Question

这是我的CSS：

#menu {
    float: left;
    background: url(images/menu_normal.jpg) repeat-x bottom;
}

#menu li {
    display: inline;
    float: left;
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 60px;
}

#menu li 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;
}

这是我的HTML：

<div id = "menu">
        <ul>
            <li><a href = "#">All</a></li>
            <li><a href = "#">Sports</a></li>
            <li><a href = "#">Movies</a></li>
            <li><a href = "#">Shows</a></li>
            <li><a href = "#">Sales</a></li>
            <li><a href = "#">Clubs</a></li>
            <li><a href = "#">Concerts</a></li>
            <li><a href = "#">Parties</a></li>
        </ul>
    </div>

Chrome和Safari中未显示a:hover的背景图片。我找到了一些关于WebKit bug的内容，但它是否真的如果是，它怎么能修复？

以下是网址： http://eximi.dreamhosters.com/feasibility/statue.html

谢谢！

Answer 1

#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-explorer 6/7/8/9以及最新版本的opera，safari，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中根本没有。{1}}。

更新2

所以我刚刚在Chrome浏览器中更改了#menu相关规则（！您无法使用此功能的浏览器）：

#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。

Answer 2

改为#menu li a:hover改为#menu li:hover a。

Answer 3

它似乎是一个webkit错误，有点搜索它。也许尝试下一页提出的方法？ http://www.simonday.com/web-design-blog/2010/10/20/css-ahover-not-working-or-crashing-webkit-chrome-safari/

只需将您的代码更改为：

#menu li a:hover, #menu li:hover, a {
    ...
}

Answer 4

试试这个：

#menu ul li a:hover {
(style info here)
}

如果这不能解决问题，请告诉我！

Google Chrome和Safari中的背景图片问题

4 个答案:

已更新，以反映您的实际CSS

更新2