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现在不是我的朋友。

有没有解决方法呢？我很感激。

提前致谢。

Answer 1

使用简写background属性内联似乎是一个问题。尝试将速记background属性分离为其各自的属性：

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

或者您可以尝试使用包含background属性的类：

.bg {
    background: red
}

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

通过jQuery更改后台属性会导致Safari出现问题

1 个答案: