Question

我喜欢使用border和box-shadow inset的效果，但只有“Chrome”支持插入负值“0px 0px -1px”。

然而，当我检查FF，Safari和IE（歌剧我没有它，但我打赌它也不支持它）......根本没有盒子阴影。

当我用firebug检查元素并尝试输入box-shadow：0px 0px 1px rgba（255,255,255,0.7）inset;它确实出现但不是-1px。那么该值无效。

有人对此有所了解吗？如果不是......我怎样才能使“IF”浏览器不是chrome，而是添加正值呢？

Answer 1

您可以使用用户代理检测来检测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也为以前的旧版本用户代理字符串提供了一个列表。

Answer 2

我确信这个具体案例有更好的方法，但我只是想分享一下。

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

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

.ie7 .example {
  background-color: orange
}

该页面列出了所有支持的浏览器，您可以制作适用于Chrome以外的所有内容的样式。

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

CSS - 如何制作“Firefox，Safari，Opera和IE”？

2 个答案: