当前位置： 文江博客 话题详情

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

发布于 2024-11-15 21:36:44 字数 1408 浏览 1 评论 0 原文

这是我的 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>

a:hover 的背景图像在 Chrome 和 Safari 中不显示。 我发现了一些有关 WebKit 的错误，但真的是这样吗？如果是，如何修复？

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

谢谢！

原文

Here is my 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;
}

Here is my 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>

The background image for a:hover is not displayed in Chrome and Safari.
I found something about WebKit bug, but is it really and if yes, how could it be fixed?

Here is the URL:
http://eximi.dreamhosters.com/feasibility/statue.html

Thank you!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

丢了幸福的猪 2024-11-22 21:36:44 
#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#已修复。是的，他们不使用图像，但正如您所看到的，#bugged 无论如何都不适用于颜色。

以防万一，带有背景图像的工作版本 - http://jsfiddle。 net/dpCwp/3/

嗯，刚刚在 internet-explorer6/7/8/9 以及最新版本的 , safari， - 就像一个魅力（除了加载远程图像时的延迟..）

只是为了做事更清楚...这绝不是与 的不当使用！

已更新，以反映您的实际 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... */
}
  1. 我删除的 CSS 属性是必不可少的，我添加的 CSS 属性也是如此。规则也一样！
  2. 我已经删除了 :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。

#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 */
}

I'd do it similar to this.

But without a real example, I have hard time judging this. Same as Michael, if doesn't work, let me know.

Plus, jsFiddle or a link to actual site would be nice.

Okay, I made an example...

http://jsfiddle.net/dpCwp/

As you can see, there is your version of code in div#bugged which is not working and, mine - div#fixed. Yes, they use no images, but as you can see #bugged doesn't work with colors anyway.

And just in case, a working version with image for background - http://jsfiddle.net/dpCwp/3/

Huh, and just tested on 6/7/8/9 and with newest versions of , , , — works like a charm (except the delay when loading remote image..)

And just to make things clearer... that's in no way a bug related to or whatever, that's improper use of !

Updated, to reflect your actual CSS

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

Must be replaced to:

#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... */
}
  1. The CSS properties I removed were essential, and those which I added too. Same for rules!
  2. I've removed all the properties from :hover, :active pseudo-classes, because those are inherited from #menu li a, which you don't have at all in your CSS.

Update 2

So I just changed #menu associated rules with Chrome(! the browser you don't get this working) on-the-go to these:

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

And it works flawlessly! So, I'm going to say it once again, that's no bug, that's invalid CSS.

回复 原文
_失温 2024-11-22 21:36:44

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

Change #menu li a:hover to #menu li:hover a instead.

回复 原文
绻影浮沉 2024-11-22 21:36:44

经过一番搜索后，它似乎是一个 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 {
    ...
}

It appears to be a webkit bug upon a bit of searching for it. Perhaps try the method posed at the following page? http://www.simonday.com/web-design-blog/2010/10/20/css-ahover-not-working-or-crashing-webkit-chrome-safari/

Just change your code to:

#menu li a:hover, #menu li:hover, a {
    ...
}
回复 原文
晨与橙与城 2024-11-22 21:36:44

试试这个：

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

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

Try this:

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

If this doesn't fix it, let me know!

回复 原文
~没有更多了~

关于作者

暖伴

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

游缘惊梦

文章 0 评论 0

小兔几

文章 0 评论 0

Glik

文章 0 评论 0

生生漫

文章 0 评论 0

Luxian

文章 0 评论 0

Champion-Ming

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文