`

透明度 -- 各浏览器 及 针对浏览器不同解析样式不同问题的一种解决方案

    博客分类：
  • css
 
阅读更多

 

不同的浏览器在解析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);

 

分享到：
| label for input file ie下报拒绝访问
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics