通过 Javascript 实现的 CSS 浏览器选择符（CSS Browser Selector）

CSS 在不同浏览器下的最终显示效果是不同的，因此，出现了很多根据不同浏览器作相应处理的 HACK 技术，本文介绍的是通过 Javascript 检测浏览器和操作平台类型，然后设置特定选择符。设置样式时，通过 CSS 的包含选择符，我们很容易就能根据不同浏览器作出不同处理。

通过 Javascript 实现的 CSS 浏览器选择符（CSS Browser Selector） – 示例

 
<script type="text/javascript">
// 说明 ： 通过 Javascript 实现的 CSS 浏览器选择符（CSS Browser Selector）
// 整理 ： CodeBit.cn ( http://www.codebit.cn )
 
// CSS Browser Selector   v0.2.5
// Documentation:         http://rafael.adm.br/css_browser_selector
// License:               http://creativecommons.org/licenses/by/2.5/
// Author:                Rafael Lima (http://rafael.adm.br)
// Contributors:          http://rafael.adm.br/css_browser_selector#contributors
var css_browser_selector = function() {
	var 
		ua=navigator.userAgent.toLowerCase(),
		is=function(t){ return ua.indexOf(t) != -1; },
		h=document.getElementsByTagName('html')[0],
		b=(!(/opera|webtv/i.test(ua))&&/msie (d)/.test(ua))?('ie ie'+RegExp.$1):is('gecko/')? 'gecko':is('opera/9')?'opera opera9':/opera (d)/.test(ua)?'opera opera'+RegExp.$1:is('konqueror')?'konqueror':is('applewebkit/')?'webkit safari':is('mozilla/')?'gecko':'',
		os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':'';
	var c=b+os+' js';
	h.className += h.className?' '+c:c;
}();
</script>

其原理是：先用 js 检测浏览器类型和操作系统平台，然后给最高节点 “HTML” 赋上对应的 class ，然后在设置样式时，我们就可以通过 css 的包含选择符，根据不同浏览器作出不同处理了。