我注意到每个浏览器呈现的框阴影模糊半径略有不同,所以我想平衡一下。但是,由于他们使用无前缀版本,我需要为不同的浏览器提供不同的样式表。最靠谱的方法是什么?
例如:Mozilla 使用moz_style.css
,Chrome 使用chrome_style.css
我使用用户代理检测来执行此操作,但我听说它不是很可靠:
<script>
if(BrowserDetect.browser=="Chrome") {
document.write('<link rel="stylesheet" href="css/chrome.css" type="text/css" media="all" />')
}
</script>
最佳答案
当然,作为 CSS 属性的 box-shadow 已经为一些不同的浏览器使用了 vendor 前缀。如果你看一下我从网络上其他地方提取的这个随机框阴影片段,你会发现它使用不同的 webkit 声明,在主要框阴影属性之上的 firefox:
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
例如,我知道 Opera vendor 前缀是 -o,因此您可以将该 vendor 前缀附加到 box shadow 属性以覆盖 Opera 浏览器,但我不确定它是否受支持。你也有 IE 特定的框阴影规则:
.ieShadow{
display:block;
position:absolute;
z-index:2;
top:5px;
left:5px;
right:-5px;
bottom:-5px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
background-color:#444;
}
使用 Javascript 浏览器“嗅探”已不再是检测浏览器的方式。
所以是的,总而言之,您的盒子阴影代码肯定会因 vendor 前缀属性而异?
编辑: 对这个主题的一些启发表明它真的不是那么简单。 vendor 前缀确实有点乱。
这让您对使用 webkit 引擎和主要 box-shadow 属性的浏览器有一个很好的了解:
.box_shadow {
-webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 4px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+
}
所以我猜特定的浏览器定位无法通过 CSS 中的 vendor 前缀实现(??!)
关于javascript - 在没有浏览器检测的情况下为不同的浏览器提供不同的 css 框阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17128706/