前端浏览器兼容性问题及解决方法解读.pptVIP

条件注释语法 4、判断是IE浏览器 语法：!--[if ie] 要判断的内容 ![endif]-- 例如： !--[if ie] link rel=”stylesheet” type=”text/css” href=”css/index.css” ![endif]-- 使用较为频繁的CSS Hack技术 !important 使用最广的莫过于!important，它可以针对IE（IE7.0能正确理 解!important）和非IE浏览器设置不同的样式，只要在非IE浏 览器样式的后面加上!important，就可以针对其优先了。 所以为了兼容IE6与火狐之间的差异，一般都会用!important。 1、区分IE和非IE浏览器 #tip { background : blue; //非IE背景设置蓝色 background : red\9; //IE6、IE7、IE8背景设置红色 } 2、区分IE6、IE7、IE8、FF 区别符号：\9 * _ 例： #tip { background : blue; //Firefox背景设置蓝色 background : red\9; //IE8背景设置红色 *background : black; //IE7背景设置黑色 _background : orange; //IE6背景设置橘色 } 说明： 因为IE系列浏览器可读（\9），而IE6和IE7可读（*），另外 IE6可辨识（_），因此可以依照顺序写下来，就会让浏览器 正确的读取到自己看得懂的CSS语法，所以就可以有效区分IE 各版本和非IE浏览器（如Firefox、Google Chrome、Safari等） 3、区分IE6、IE7、FF（方法一） 区别符号： * _ 例： #tip { background : blue; //Firefox背景设置蓝色 *background : black; //IE7背景设置黑色 _background : orange; //IE6背景设置橘色 } 说明： IE6和IE7可读（*），IE6又可以读（_），但是IE7却无法读取 （_），至于Firefox（非IE浏览器）则完全无法辨识（*）和 （_），因此就可以透过这样的差异性来区分IE6、IE7和 Firefox。 4、区分IE6、IE7、FF（方法二） 区别符号： * !important 例： #tip { background : blue; //Firefox背景设置蓝色 *background : black !important; //IE7背景设置黑色 *background : orange; //IE6背景设置橘色 } 说明： IE7可以辨识（*）和（!important），但IE6只可以读（*）， 却无法辨识（!important），至于Firefox可以读取 （!important），但不能辨识（*），因此可以透过这样的差 异来有效区别IE6、IE7、Firefox。 5、区分IE7、FF 区别符号： * !important 例： #tip { background : blue; //Firefox背景设置蓝色 *background : black !important; //IE7背景设置黑色 } 说明： 因为Firefox可以辨识（!important），但无法辨识（*），而 IE7则可以同时看懂（*）和（!important），因此可以两个辨 识符号来区别IE7和Firefox。 6、区分IE6、IE7（方法一） 区别符号： * _ 例： #tip { *background : blue; //IE7背景设置蓝色 _background : black; //IE6背景设置黑色 } 说明： 因为IE7和IE6都可以辨识（*），但是IE6可以辨识（_），IE7 却无法辨识，透过IE7无法辨识（_）的特性，就可以轻松区 分IE6和IE7。 7、区分IE6、IE7（方法二） 区别符号： !important 例： #tip { background : blue !important; //IE7背景设置蓝色 background : black; //IE6背景设置黑色 } 说明： 因为IE7可以读取（!important），但IE6