不同的浏览器在解析css时会有区别,主要包括两种情况:
第一,不同浏览器的css识别标签不同,例如透明度问题,不同的浏览器对透明度的样式的标签不同,
chrome + firefox + Safari :
opacity:sqlN
其中sqlN的值域为[0, 1]
ie :
filter:alpha(opacity=sqlN)
其中 sqlN的值域为[0, 100]
第二,浏览器的css的标签是相同的,但是解析不同,例如盒子模型的标尺不同,一种解决方案是,可以在加载页面之前判断浏览器是什么内核,针对不同的浏览器内核给body 加入不同的class,然后可以针对不同的浏览器单独给出样式。
例如: jq-chrome .cssClass{.....*****.....}
jq-ie .cssClass{-------.........---------}等
其中,判断内核加载不同class的处理:
/** * 初始化页面css信息,为body加上基础的css比如<body class="jq-ie jq-ie8"> */ (function($){ var ua = navigator.userAgent.toLowerCase(); var isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1), isLinux = ua.indexOf("linux") != -1 , isChrome = ua.indexOf("chrome") > -1 , isBorderBox = $.browser.msie && !$.isStrict; $.isStrict = document.compatMode == "CSS1Compat"; // //1.7webkit内核的都会被设置成safari // if(isChrome){ // $.browser.chrome = true; // $.browser.safari = null; // delete $.browser.safari; // //version不改了没什么意义 $.browser.version = // } var initJQCss = function() { // find the body element var bd = document.body || document.getElementsByTagName('body')[0]; if (!bd) { return false; } var cls = [ ' ', $.browser.msie ? "jq-ie jq-ie" + ($.browser.version.split("\.")[0]) : $.browser.gecko ? "jq-gecko jq-gecko" + ($.browser.version.split("\.")[0]) : $.browser.opera ? "jq-opera" : $.browser.chrome ? "jq-chrome" : $.browser.safari ? "jq-safari" : $.browser.mozilla ? "jq-mozilla" : "" ]; if (isMac) { cls.push("jq-mac"); } if (isLinux) { cls.push("jq-linux"); } if (isBorderBox) { cls.push('jq-border-box'); } if ($.isStrict) { // add to the parent to allow for selectors like // ".jq-strict .jq-ie" var p = bd.parentNode; if (p) { p.className += ' jq-strict'; } } bd.className += cls.join(' '); return true; } if (!initJQCss()) { $(document).ready(initJQCss); } })(jQuery);