ie6/ie7/firefox/dispaly:inline-block:兼容性

<div class="update">

文字内容        

    <div class="order">

    <span class="up" title="排序1"></span>

    <span class="down" title="排序2"></span>

   </div>            

</div>

 .update{position:relative; display:inline-block; *zoom:1; *display:inline; *overflow:hidden; padding-right:25px;}

 .order{position:absolute; top:-2px; right:0;}

由于ff,ie8,chrome 支持inline-block,所以其形成一个内联块,并有一个右边的内边距,所以其子元素的绝对定位right:0;可以做到右边为0,即可相对于左边自适应。

而ie6,ie7不支持inline-block,所以其右边内边距不能用,需要将其设置为display:inline,变为内联元素,然后设置:zoom:1;触发layout,其显示效果为inline-block。

总计:ie6,ie7下display:inline; zoom:1;=====ff,ie8,chrome的inline-block

posted @ 2011-05-20 11:04  cumt魏  阅读(1171)  评论(1编辑  收藏  举报