inline-block
但能夠觸發塊元素,其它主流瀏覽器均支持inline-block
。注:在行內元素上使用display:inline-block
,IE六、7與其餘瀏覽器效果一致web
緣由分析:使用inline-block
屬性在IE下會觸發layout,所以元素上設置的width
、height
是能生效的,因此也就有了同其它瀏覽器一致的顯示效果瀏覽器
2.1 首先設置inline-block
觸發塊元素,具備了layout的特性,而後設置display:inline
使塊元素呈現行內元素,此時layout的特性不會消失。(兩個display
要前後放在兩個 CSS 樣式聲明中才有效果.)wordpress
div { display:inline-block; } div { *display:inline; }
2.2 直接設置display:inline
,使用zoom:1
觸發layout。佈局
兼容全部瀏覽器的方法是:字體
div{ display:inline-block;*display:inline;*zoom:1; }
行內元素(如a
)、塊元素(如div
)設置display:inline-block
後,以及真正意義上的inline-block
水平呈現的元素(如input
),在換行顯示或空格分隔了的狀況在水平顯示上會有間距產生ui
2.1 移除空格(代碼可讀性變差)spa
<div> <a href=""> 這是一</a><a href=""> 這是二</a><a href=""> 這是三</a> </div>
注:a
標籤爲display:inline-block
的狀況下code
2.2 使用margin
負值(margin
負值的大小與上下文的字體和文字大小相關,請參考「基於display:inline-block的列表佈局」)orm
a{ display: inline-block; margin-right:-3px; }
2.3 使用font-size:0
ci
div { font-size: 0; -webkit-text-size-adjust:none; /*去除谷歌最小字體的限制,新版谷歌中已經失效*/ } div a { font-size: 12px; }
2.4 使用letter-spacing
div { letter-spacing: -3px; } div a { letter-spacing: 0; }
注:Opera瀏覽器下有個蛋疼的問題:最小間距1像素,而後,letter-spacing
再小就還原了
2.5 使用word-spacing
div { word-spacing: -6px; } div a { word-spacing: 0; }
下面展現的是YUI 3 CSS Grids 使用letter-spacing
和word-spacing
去除格柵單元見間隔方法(注意,其針對的是block水平的元素,所以對IE8-瀏覽器作了hack處理):
.yui3-g { letter-spacing: -0.31em; /* webkit */ *letter-spacing: normal; /* IE < 8 重置 */ word-spacing: -0.43em; /* IE < 8 && gecko */ } .yui3-u { display: inline-block; zoom: 1; *display: inline; /* IE < 8: 僞造 inline-block */ letter-spacing: normal; word-spacing: normal; vertical-align: top; }
如下是一個名叫RayM的人提供的方法:
li { display:inline-block; background: orange; padding:10px; word-spacing:0; } ul { width:100%; display:table; /* 調教webkit*/ word-spacing:-1em; } .nav li { *display:inline;}