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 的包含选择符,根据不同浏览器作出不同处理了。