css3高级和低级样式属性先后顺序

写css hack 时,由于hack主要针对的是个别浏览器,hack的书写顺序应当是从一般到特殊的写法。

如:

.box { width:200px; height:200px; position:fixed; left:0; top:0; _position:absolute; }

如果颠倒顺序,从特殊到一般,就失效了。

但是,对于高级浏览器支持的一些属性,低级版本和升级版本支持的可能不一样,为了都支持,该怎么写?

看如下代码:

div { height:30px; width:60px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; border:2px solid orange; margin-bottom:20px; }
p { height:30px; width:60px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; border:2px solid orange; }

运行结果则是一致的。demo:http://jsfiddle.net/xmlovecss/XRrcK/

再对比ff和chrome的样式截图:

从浏览器渲染出的结果可以看出,火狐无所谓,chrome浏览器则分出了先后次序。

考虑到大多数人有升级高级浏览器的需要,所以建议写法是,从高级到低级

 

posted @ 2013-01-18 14:28  xmlovecss  阅读(240)  评论(0编辑  收藏  举报