css - Firefox 为每个类重新下载背景图像？

Question

如果我的页面有 50 个 div 元素，有 50 个单独的 css 类，并且每个 css 类都有一行:

background:#000 url(curve_red/circle.png) no-repeat 0 0;

然后 Firefox (3.5) 将对同一个文件发出 50 个 http 请求(使用 firebug 验证)。

但是 IE 会看到这种重复，并且不会在每次请求后尝试重新下载文件(使用 fiddler 验证)。

这是一个 bug 还是任何人都可以提供任何关于 firefox 为什么这样做的见解？

Answer 1

只是一个猜测，但您能否尝试将背景属性放入 1 个 css 类而不是 50 个？这至少会消除您的 css 中的重复，并且可以解释为什么 FF 不只发出 1 个请求。

当然，您可以向 div 添加多个类，这样它们仍然可以保留其他单独的样式，例如

.myBackground { background:#000 url(curve_red/circle.png) no-repeat 0 0; }
.class1 { color: blue; }
.class2 { color: red; }

然后在您的 html 中:

<div class="class1 myBackground">blue div</div>
<div class="class2 myBackground">red div</div>