最近在用html5 写一些 移动前端页面
一开始对html5宣称的很多特性非常兴奋 。
结果真正用起来得时候,却非常失望,因为很多新属性必须要加浏览器前缀
一致期盼html5能带来尽可能的浏览器兼容
看来情况却更加恶化了。怪不得facebook 要放弃html5 的方式而使用app做客户端
因为使用了最新的盒子模型:-webkit-box
而要实现起来 其内部元素居中则需要在父层元素这么写:
<del>/* Firefox */
display:-moz-box;
-moz-box-pack:center;/*实现水平居中*/
-moz-box-align:center;/*垂直居中,不需要删除即可*/
/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*实现水平居中*/</span>
-webkit-box-align:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*垂直居中,不需要删除即可*/</span>
/* W3C */
display:box;
box-pack:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*实现水平居中*/</span>
box-align:center;<span style="font-family: Arial, Helvetica, sans-serif;">/*垂直居中,不需要删除即可*/</span></del>
这就是 html5 为我们带来的 “方便”?
还是我还没有入门?
好吧,是我没搞明白,因为使用过display:box 属性后, 该容器则定义为了内联元素,使用margin:0px auto让其居中是无效的,要想使其居中只能通过它的父容器的text-align:center即可