处理浏览器兼容的HACK方式

因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样,具体就是对CSS的解释不同,我们为了兼容这些,可运用条件注释来各自定义,最终达到兼容的目的。比如:

<!– 默认先调用css.css样式表 –>

<link rel=”stylesheet” type=”text/css” href=”css.css” />

<!–[if IE 7]>

<!– 如果IE浏览器版是7,调用ie7.css样式表 –>

<link rel=”stylesheet” type=”text/css” href=”ie7.css” />

<![endif]–>

<!–[if lte IE 6]>

<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>

<link rel=”stylesheet” type=”text/css” href=”ie.css” />

<![endif]–>

这其中就区分了IE7和IE6向下的浏览器对CSS的执行,达到兼容的目的。同时,首行默认的css.css还能与其他非IE浏览器实现兼容。

注意:默认的CSS样式应该位于HTML文档的首行,进行条件注释判断的所有内容必须位于该默认样式之后。

这也是所谓的css hack技术…
CSS各浏览器的hack写法
众所周知浏览器之争由来已久,伴随着浏览器的升级换代,各个浏览器对CSS的兼容性问题日渐突出。区别较大的是盒模型的解析。
部分浏览器,比如IE浏览器,设定的width是包含padding及border在内的
另一部分浏览器,设定的width是不包含padding及border在内的
甚至更特殊的是width包含margin在内
此外,还有IE6的几大BUG,比如3px像素BUG,等等
为了使CSS样式在各大浏览器中的表现效果趋于一致。所以对某些css语句需要针对不同的浏览器解析方式写不同的语句,这就是hack的由来。
如何让浏览器来识别不同的CSS语句呢?这就要给css加特殊的字符来区别
“_” 前缀 IE6可识别
“!important” 后缀 除IE6均可识别
“*” 前缀 IE6、IE7可识别
“/9” 后缀IE浏览器可识别
“/0” 后缀 IE8可识别
以上为常用区分浏览器的css hack写法。虽然hack可以解决浏览器的兼容问题,但是hack不是好东西,不是万不得已的情况最好不要使用hack。hack是可以通过不同的排版来避免的!