如何在safari遊客的編碼中做出例外？

Question

在我的代碼的一部分我有CSS3動畫，它似乎不能很好地在safari上運行，但它在其他瀏覽器上很好，所以，我想做和異常，如果瀏覽器是safari然後忽略動畫部分的代碼。 這裏是我的代碼：

download-music { 
background: transparent url(../images/dl-music.png) 0 0 no-repeat; 
float:left; 
width:110px; 
height:39px; 
text-indent:-9999px; 
opacity:0.5; 
    -webkit-opacity: 0.5; 
    -moz-opacity: 0.5; 
filter:alpha(opacity=40); /* For IE8 and earlier */ 
transition: opacity .45s ease-in-out; 
    -moz-transition: opacity .45s ease-in-out; 
    -webkit-transition: opacity .45s ease-in-out; /* EXCEPTION FOR HERE */ 
    -o-transition: opacity .45s ease-in-out; 

} 

.download-music:hover {-webkit-opacity:1 !important; -o-opacity:1; -moz-opacity:1; filter:alpha(opacity=100); } 

Answer 1

選擇黑客

1.

/* Safari 2/3 */ 
html[xmlns*=""] body:last-child .selector {} 
html[xmlns*=""]:root .selector {} 

2.

/* Safari 6- and Chrome 24- */ 
::made-up-pseudo-element, .selector {} 

3.

/* Safari 2/3.1, Opera 9.25 */ 
*|html[xmlns*=""] .selector {} 

媒體查詢黑客

/* Safari 3+, Chrome */ 
@media screen and (-webkit-min-device-pixel-ratio:0) {} 

JavaScript的黑客

1.

/* Safari 5- */ 
var isSafari = /a/.__proto__=='//'; 

2.

/* Safari */ 
var isSafari = /Constructor/.test(window.HTMLElement); 

來源：http://browserhacks.com/

Answer 2

溝槽前綴opacity，因爲所有瀏覽器都支持它已經有兩年了。它會干擾你的過渡聲明。這應該適用於所有瀏覽器。

.download-music { 
    background: transparent url(../images/dl-music.png) 0 0 no-repeat; 
    float:left; 
    width:110px; 
    height:39px; 
    text-indent:-9999px; 
    opacity:0.5; 
    filter:alpha(opacity=40); /* For IE8 and earlier */ 
    -moz-transition: opacity .45s ease-in-out; 
    -webkit-transition: opacity .45s ease-in-out; 
    -o-transition: opacity .45s ease-in-out; 
    transition: opacity .45s ease-in-out; 
} 

.download-music:hover { 
    opacity:1; 
    filter:alpha(opacity=100); 
}