您的位置：首页 > Web前端 > CSS

针对各浏览器的CSS Hack写法

2012-11-29 20:47 218 查看

本文原地址：http://www.beyondweb.cn/article_detail.php?id=35
今天把自己博客里”针对各浏览器的CSS Hack写法“的这篇文章拿来分享给大家。对于浏览器兼容问题，我们应该碰到很多了，在平时写一些页面时，在IE8、IE9上可能好好的，当我们在IE6、IE7或者是其他的浏览器上再浏览这些页面时，可能会发现我们的页面已经面目全非了，作为一名前端开发人员，这是最让人发疯的问题了，那么我们该怎么解决这些问题呢？首先，我们写的页面在不同的浏览器上之所以会出现表现不同的问题，是因为不同的浏览器在解析页面时，他们所遵循的规则并不是完全相同的。比如IE，不同的版本解析都不同，何况是不同的浏览器厂商，不同的内核呢。但是我们在遇到兼容性问题时，应该首先检查我们自己写的代码，看看是不是自己的问题，然后再去追究浏览器的问题。还有，在遇到兼容性问题时，不要动不动就用CSS Hack技术，因为CSS Hack技术并不是W3C所推崇的，因此，不到万不得已，尽量不要用，但有时不用还真的不行。下面我们就来详细的熟悉一下CSS Hack的写法吧。1、我们可以用浏览器条件注释法，这对兼容性问题比较多时特别适用。主要原理是根据不同版本的浏览器载入不同的CSS样式表，如：


或者是对html或body挂载不同的类，如：



然后在样式表里，对各种选择器加浏览器前缀,如：.test{color:#ff00ff;}/*标准浏览器*/
.ie9 .test{color:yellow;}/*IE9浏览器*/
.ie8 .test{color:red;}/*IE8浏览器*/
.ie7 .test{color:green;}/*IE7浏览器*/
.ie6 .test{color:black;}/*IE6浏览器*/
大家可以拿下面的这个Demo来测试 Demo Download2、直接对选择器的属性或值做处理，如.test{
color:#ff00ff;/*标准浏览器，如FF，chrome等*/
color:yellow\0;/*IE8,IE9,IE10浏览器都能识别*/
*color:green;/*IE6,IE7浏览器都能识别*/
+color:#ccc;/*只有IE7浏览器识别*/
_color:black;/*只有IE6浏览器识别*/
}
对于这种方法，大家同样可以可以拿下面这个Demo来测试 Demo Download
最后请大家看一张图http://centricle.com/ref/css/filters/，这张图详细的罗列了各浏览器的CSS Hack写法，大家以后在做兼容性处理时可以做个参考。本文出自 “BeyondWeb” 博客，请务必保留此出处http://beyondweb.blog.51cto.com/6183686/1074381

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航