1

在我的代码的一部分中，我有 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); }
4

2 回答 2

0

抛弃前缀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); 
}
于 2013-05-19T23:58:13.723 回答
0

选择器技巧

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/

于 2013-05-19T23:02:58.570 回答