CSS - 如何制作“Firefox、Safari、Opera 和 IE”？答案

【问题标题】：CSS - How to make if "Firefox, Safari, Opera and IE"?CSS - 如何制作“Firefox、Safari、Opera 和 IE”？
【发布时间】：2012-08-04 23:55:15
【问题描述】：

我喜欢使用边框和框阴影插入的效果，但只有“Chrome”支持插入负值0px, 0px, -1px。

但是，当我检查 FF、Safari 和 IE（opera 我没有，但我敢打赌它也不支持）...根本没有 box-shadow。

当我用 firebug 检查元素并尝试输入 box-shadow: 0px 0px 1px rgba(255,255,255,0.7) inset;它确实出现了，但没有出现在-1px 中。则该值无效。

有人知道吗？如果不是，我如何使“IF”浏览器不是 chrome，然后添加正值？

【问题讨论】：

把 fall back 规则放在最前面，然后是只有 chrome 支持的规则，所有不支持的浏览器都会忽略它并使用前面的规则
Yeh 适用于 FF，但不适用于 safari：S 奇怪。即使添加了-webkit safari 也不识别它。
框阴影中的第三个值不允许有负数，因此0px 0px -1px 无效。如果它在 Chrome 中工作，这是一个错误。不要依赖它。
BoltClock +1 ... 很高兴知道。但是负值的效果比正值要好:(
@NenaddvL 试试第四个参数是否定的。 0px 0px 2px -1px 你可能会得到你现在正在挖掘的相同效果

标签： css

【解决方案1】：

我确信对于这种特定情况有更好的方法，但我只是想分享一下。

CSS Browser Selector 是一个非常酷的小 JS 文件，它允许您为特定浏览器指定 CSS 类。

例如，如果浏览器是 IE7，则以下内容仅适用于具有 example 类的元素。

.ie7 .example {
  background-color: orange
}

该页面列出了所有支持的浏览器，您可以创建适用于除 Chrome 之外的所有浏览器的样式。

.ie, .ie7, .ie8, .opera, ... { style }

【讨论】：

+1 ...好吧，我希望有任何其他解决方案，如果没有我会检查这个作为正确答案，因为它是正确的......感谢分享sachleen。

【解决方案2】：

您可以使用用户代理检测来检测 chrome 浏览器：

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

（取自this page）

然后：

// include this in the <head> of your doc
if (is_chrome) {
   <link href="chrome_style.css" rel="stylesheet" />
} else {
    // do stuff for other browsers (or ignore)
}

似乎“chrome”这个词出现在大多数（如果不是全部）chrome 的用户代理中。我发现userAgentString.com 还提供了旧版本的用户代理字符串列表。

【讨论】：