Safari邊框顏色懸停錯誤

所以我目前正面臨一個問題，當你將鼠標懸停在Safari（6.0.2版本）的元素上時，該元素上的邊框顏色看起來有點奇怪。爲了讓你分解我所做的元素，只是一個簡單的列表元素，它除了左邊外，在所有邊上都有相同的邊框顏色。Safari邊框顏色懸停錯誤

下面有一個例子： http://cl.ly/MPkG

在懸停我添加一個簡單的CSS3等級轉變到元件以及改變邊界顏色的灰度暗的陰影（不包括左手側）。

這裏是一個真正的粗糙小提琴顯示問題： http://jsfiddle.net/dannykeane/N4jF5/

這工作完全正常在所有現代瀏覽器Safari的除外（版本6.0.2）。我也試着給這個元素添加一個backface-visibility:hidden;，但它仍然表現相同。

任何幫助，將不勝感激。

感謝

上的視頻好功夫，但我不能觀看。無論如何，考慮使用jsbin.com或jsfiddle.com而不是視頻和屏幕截圖。 – user1721135

如果你在safari中測試它，你會看到問題，這裏有一個真實的快速模擬我所做的事情。 http://jsfiddle.net/dannykeane/N4jF5/ – user2009127

它在懸停（在鉻上測試）時變得模糊。它做錯了什麼？ – user1721135

這可能一個未知的bug在Safari中，雖然該錯誤很有道理的，因爲你正試圖把一個較厚的邊框左側比箱壁的其餘部分。用定義的border-radius可以看到出血。如果各邊的厚度相等，即使有邊界半徑，也不會有任何溢出邊界。

您可能還會注意到，如果您調整了左側的邊框厚度，除非您放大/縮小頁面，否則出血將不可見。也許調整價值也無濟於事，因爲這是不穩定的，也是暫時的解決辦法。

對於瀏覽器特定的錯誤，我們無能爲力，只是一種解決方法。我們可以將較厚的邊框分隔到圍繞您的內容的下一個div。而且不要忘記刪除左父格的1px寬的邊框：

border-left: 0;

喜歡這個基本小提琴：http://jsfiddle.net/bgYhQ/

2013-01-31 12:41:30 Anne

回答