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浏览器则分出了先后次序。
考虑到大多数人有升级高级浏览器的需要,所以建议写法是,从高级到低级。