解决 inline-block 的所有bug 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.b-wrap {
    font-size:0;/* 所有浏览器 换行间隙 */
    *word-spacing:-1px;/* IE6、7 1px间隙 */
}
.b-wrap .b{                 /* 子元素重置为正常值 */  
    font-size: 12px;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align:top;
    width:50px; height:50px;  background:red;
    display: inline-block;
    *display:inline;
    *zoom:1;
}
@media screen and (-webkit-min-device-pixel-ratio:0){  /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
    .b-wrap{
        letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
    }
}

</style>
</head>

<body>
<div class="b-wrap">
    <span class="b">box1</span>
    <span class="b">box2</span>
    <div class="b">box3</div>
    <div class="b">box3</div>
</div>
</body>
</html>

 

posted @ 2013-09-21 22:05  hugystyle  阅读(264)  评论(0)    收藏  举报