CSS sprites bug？

Question

我在为sprite使用覆盖时发现了一种奇怪的行为。情况：

• 1个css文件作为整个站点的基本文件，带有精灵。 （screen.css）
• 每个子网站1个css，主要是基本网站的副本，但有一些不同的颜色。 （local.css）

local.css仅包含在子网站中更改的选择器。由于某些图标具有不同的颜色，因此使用screen.css中的css声明了一个新的sprite，但是使用了更新的sprite路径。 （背景：网址（＆＃34; path_to_sprite＆＃34;） - ＆gt;背景：网址（＆＃34; path_to_new_sprite＆＃34;））。

然而，当重新加载页面时，使用精灵的所有元素正在被重置＆＃34;到默认的0 0位置。元素检查器没有显示任何问题：我们有原始的精灵，用新的精灵覆盖，以及原始的背景位置（每个元素）。

如果我手动将现有元素的背景位置添加到新的local.css，问题就会消失，我的背景会呈现为OK（对于该元素）。

我无法在Google上找到有关此行为的任何内容。有人可以提供一些帮助吗？

一些示例代码：

Screen.css（原创）：

#element1, #element2 { background: url("../images/originalsprite.png") no-repeat; background-size: 500px 500px; }
#element1 { width: 20px; height: 20px; display: block; background-position: -80px -80px; }

Local.css（子网站）：

#element1, #element2 { background: url("../images/newsprite.png") no-repeat; background-size: 500px 500px; }
/* Below renders the coordinates as stated */
#element1 { background-position: -80px -80px; }
/* Below renders the coordinates at 0 0 */
#element1 { }