DIV+CSS浏览器兼容方法的总结.ppt

DIV+CSS浏览器兼容方法的总结 什么是浏览器兼容 什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。 一、CSS 兼容 IE6/IE77对FireFox from 针对firefox ie6 ie7的css样式 !important 方法 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的用法了