浏览器兼容性方法综述.pptVIP

DIV+CSS浏览器兼容方法的总结 ;什么是浏览器兼容 ;一、CSS 兼容;IE6/IE77对FireFoxfrom 针对firefox ie6 ie7的css样式 代码: style #wrapper { width: 120px; } /* FireFox */ *html #wrapper { width: 80px;} /* ie6 fixed */ *+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */ /style 注意: *+html 对IE7的兼容 必须保证HTML顶部有如下声明： 代码: !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”/TR/html4/loose.dtd“;!important 先来说一下什么是css hack ，简单的说针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。Css hack的原理：由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如 IE6能识别下划线_和星号 * ，IE7能识别星号 * ，但不能识别下划线_，而firefox两个都不能认识。书写顺序，一般是将识别能力强的浏览器的CSS写在后面 浏览器优先级别:FF IE7 IE6 , CSS hack书写顺序一般为FF IE7 IE6 !important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用. (1)区别ie与firefox的hack为:border:2px solid #f00;*border:1px solid #f00; (2)区别Ie6.0 与Ie7.0、firefox的hack为:border:1px solid #f00!important;border:2px solid #f00; 在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie 系列进行了两次border设置后，后一个属性覆盖了前一个属性，故为一像素的边框。在(2)中，之所以把!important放在第一个border 设置，是因为它把这次border的优先级提高了，即使后面在一次甚至在N次设置border 也无效，但是Ie6.0对这个规则不接受，而导致它应用了第二次的border 设置，也就是第二次覆盖了第一次的这一原理， 并不是它不识别!important;所以它的border为2 像素的红框. ;这是一个简单的应用：html headmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/titlestyle type=text/cssdiv{width:800px;height:250px;background-color:yellow!important;/*提升指定样式规则的应用优先权*/background-color:red;border:3px solid #000!important;/*firefox*/*border:5px solid #f00!important;/*Ie7.0*/border:1px solid #000;/*Ie6.0*/}/style/head ;例一： CSS #box{ color:red !important; color:blue; } HTML div id=Box在不同的浏览器下，这行字的色应该不同！/div 这个例子应该是大家经常见到的important的用法了，在IE环境下，这行字是蓝色，在firefox下，为红色。;例二： 1．IE6和firefox的区别： ????? background:orange;*background:blue; ?意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色. 2. IE6和IE7的区别： ?????? background:green !important;background:blue; 意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色 3. 区别IE7与FF：