通過jQuery更改背景屬性在Safari中導致問題

這真的很奇怪Safari的行爲，我不知道爲什麼它會添加額外的屬性，這在我正在處理的項目中造成了很多麻煩。通過jQuery更改背景屬性在Safari中導致問題

該測試非常簡單，這裏有一個小提琴：

function clickme() { 
 
\t $('.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;"

這使我麻煩不讓我重寫預定義的CSS樣式我需要設置背景：'#color'必選。否則，background-image將始終在background-color之上，即使它在元素中是內聯的。 Safari現在不是我的朋友。

有沒有解決方案呢？我會很感激。

在此先感謝。

來源

2017-01-27 msqar

http://caniuse.com –

這似乎是一個問題，使用速記background屬性內聯。嘗試分離速記background地產出它的各個屬性：

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

或者你可以嘗試使用類與background屬性：

.bg { 
    background: red 
} 

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

來源

2017-01-27 01:27:58

的問題是，我需要在Chrome或Firefox中使用「background：red」：/它看起來像Safari中的錯誤，對吧？現在，它只發生在使用jQuery，因爲如果你使用平面Javascript使用setAttribute，它不會發生..所以這是jQuery的錯。 – msqar

我不能這樣做，它需要內聯風格。感謝tho試圖幫助。 – msqar

@msqar它似乎不支持內聯樣式。希望你找到一個解決方法:) –

通過jQuery更改背景屬性在Safari中導致問題

回答

相關問題