如何在为野生动物园游客编码时例外？答案

【问题标题】：How to make exception in coding for safari visitors?如何在为野生动物园游客编码时例外？
【发布时间】：2013-05-20 07:58:13
【问题描述】：

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

【问题讨论】：

标签： css exception css-animations

【解决方案1】：

选择器技巧

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

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

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

媒体查询技巧

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

JavaScript 技巧

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

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

来源：http://browserhacks.com/

【讨论】：

【解决方案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); 
}

【讨论】：