CSS兼容所有浏览器代码怎么写？

html-css029

CSS兼容所有浏览器代码怎么写？,第1张

*        ， ie6,ie7可以识别；

_和- ，  ie6可以识别；

!important  ,表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；

-webkit- ，针对safari，chrome浏览器的内核CSS写法

-moz-，针对firefox浏览器的内核CSS写法

-ms-，针对ie内核的CSS写法

-o-，针对Opera内核的CSS写法

有两种方法：

1、在同一个CSS样式表中，使用 !important 来定义不同的值以适应Firefox和IE。

例如：

padding: 20px !important/For Firefox/

padding: 10px/For IE/

（注意这里IE6是无法识别，important 这个标记的，但它会识别padding: 20px，所以要在后面加上padding: 10px用来覆盖padding: 20px）这个方法适用于修改少量代码。

2、条件注释。（只对IE浏览器有效）这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式，再在head中加入以下的代码以适应不同的IE浏览器版本调用：

注意：

gt: greater than （高于）

lte: less than or equal to （低于或等于）

另外：IE还支持一个非标准的标签：comment

This is not Internet Explorer.

This is Internet Explorer.

IE会自动把此标签中的内容当作注释处理掉。

扩展资料

关于css兼容性问题及一些常见问题

目前主流浏览器的兼容性做的都比较好了，以下主要针对IE6，7的不兼容问题进行解决。

1、有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下，内容会撑开设置好的高度。

解决方法：给对应的父级加overflow:hidden但是会有部分被隐藏掉，最好是精确计算宽高再设定。

2、在IE6下有元素浮动时，如果宽度需要由内容撑开，就给里边的块元素都加浮动，正常浏览器不用加浮动。

3、在IE6下元素的高度的小于19px的时候，会被当做19px来处理。

解决办法：添加overflow:hidden

跨浏览器兼容是个永恒的话题，其实只要坚持用CSS的规范书写CSS的代码，就不会产生什么不兼容的问题。 hack针对的是像IE6等那些老版本的浏览器。它们都将会淘汰。而且现在每个浏览器更新的版本中对CSS的解释器都是根据CSS规范编写的。所以以后的CSS兼容问题都将消失。

<style>#wrapper{width: 100px!important/* IE7+FF */width: 80px/* IE6 */}</style>