javascript - 通过 jQuery 更改背景属性会在 Safari 中造成问题

Question

Safari 的行为方式确实很奇怪，我不知道为什么它添加了额外的属性，这给我正在处理的元素带来了很多麻烦。

测试非常简单，这里有一些小技巧:

function clickme() {
	$('.container').css('background', "red");
}

.container {
  width: 100px;
  height: 100px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<button onclick="clickme();">Click me!</button>

您将看到，在 Chrome 或 Firefox 中，它会按照您的预期添加 background: red，现在在 Safari 中添加此内容:

style="background-color: red; background-position: initial initial; background-repeat: initial initial;"

这给我带来了麻烦，因为不允许我覆盖 background-image 的预定义 CSS 样式，我需要强制设置 background: '#color' 。否则，background-image 将始终位于 background-color 之上，即使它内联在元素中。 Safari 现在不是我的 friend 。

这个问题有什么解决办法吗？我将不胜感激。

提前致谢。

Answer 1

这似乎是使用内联简写 background 属性的问题。尝试将简写 background 属性分离为其各个属性:

$('.container').css('background-color', 'red');

或者您可以尝试使用具有 background 属性的类:

.bg {
    background: red
}

$('.container').addClass('bg');