在开发一个网站时,我们经常会面临浏览器兼容性的问题。这篇文章将介绍一些关于CSS如何兼容IE6、IE7、FF等浏览器的技巧。首先,我们需要知道IE6、IE7的CSS解析跟FF是不一样的,所以你需要特别...
在开发一个网站时,我们经常会面临浏览器兼容性的问题。这篇文章将介绍一些关于CSS如何兼容IE6、IE7、FF等浏览器的技巧。
首先,我们需要知道IE6、IE7的CSS解析跟FF是不一样的,所以你需要特别注意以下几点:
1. IE6和IE7 无法正确解析 display: inline-block;属性,所以你需要使用 display: inline; 或者 display: block; 来代替。
2. IE6和IE7 不支持 position: fixed; 属性,所以你需要给 html、body 两者都做一个hack,即 html, body {height: 100%;} 然后给需要使用fixed定位的元素添加 position: absolute; 和 expression(top=document.documentElement.scrollTop + ‘px’);
3. IE6和IE7 对于 PNG 图片的支持非常差,我们可以使用下面的代码来解决:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’xxx.png’, sizingMethod=’scale’); 当然,这还不够,我们接下来要介绍一些针对FF浏览器的技巧。一般来说,针对IE和FF的兼容性问题都不大,但是FF有一些奇怪的地方需要我们特别注意:
1. 当你使用 display: table; 属性时,FF浏览器对于vertical-align:middle; 属性的支持不是太好,如果你用这个属性的话,建议使用 display: table-cell; 和 text-align: center; 来代替。
2. 当你使用 float 属性来布局时,FF浏览器的包围性比IE浏览器要好,所以我们需要手动为其添加一个清除浮动的元素,如下所示:
.clearfix:after {content:’’; display:block; clear:both;}
3. 当你需要干掉浏览器默认样式时,可以使用更加全面的 reset CSS,如 Eric Meyer 的 reset CSS ,虽然这样会增加一些CSS文件的大小,但是版本问题和兼容性问题也会得到一些解决。 总而言之,兼容不同的浏览器对于我们前端开发人员来说是一个必须牢记的问题。以上介绍的一些技巧仅仅是冰山一角,我们需要根据实际情况适当使用。