长为112px的td里面有一个块span,居中时引起的兼容问题

样式如下:

 .info_content table td.cols2{
 width:112px;
 }
.info_content table td.cols2 .spaToPay{
 display:block;
 width:68px;
 height:24px;
 line-height:24px;
 background:url('../images/back.png') no-repeat 0 -21px transparent;
 color:#fff;
 }

html代码如下:

 <td class="cols2"><span class="spaToPay">等待支付</span></td>

想染span块居中,如果不设置margin-left:20px.

在各个浏览器中的表现是

在firefox,google,opera等标准浏览器以及ie8,ie9中是

可在ie6,ie7中却已经居中了。

如图:

这个时候需要先针对标准浏览器设置margin-left:20px,然后再去算ie6,和ie7

可写成

.info_content table td.cols2 .spaToPay{
 display:block;
 width:68px;
 height:24px;
 margin-left:20px;
 _margin-left:0;//ie6专有
 *+margin-left:0;//ie7专有
 line-height:24px;
 background:url('../images/back.png') no-repeat 0 -21px transparent;
 color:#fff;
 }

这样设置后span块就真正居中了。

posted @ 2014-02-27 15:47  jiaojiao085  阅读(623)  评论(0编辑  收藏  举报