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

CSS跨浏览器兼容性

最新推荐文章于 2021-05-19 10:14:56 发布

原创最新推荐文章于 2021-05-19 10:14:56 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#操作系统 #javascript #ViewUI

css 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了不同浏览器在解析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);