行級元素的寬度問題

有時候需要一個空白的Anchor標籤，然後給它一個背景圖，常用於一些小的功能按鈕，但是無任何內容的標籤又預設沒有寬度，做了一個簡單測試，結果如下：

FF3:

IE6(使用IE Tester):

IE7:

Safari4:

看來還是使用&-n-b-s-p-;的相容性最好。

mt-inline-block的內容:

html>body .mt-inline-block{display:-moz-inline-box;display:inline-block;}
.mt-inline-block{position:relative;display:inline-block}
* html .mt-inline-block{display:inline}
*:first-child+html .mt-inline-block{display:inline}

 

從結果中還能看出外層容器和行框之前的間距不同的瀏覽器是不同的，IE6:0, IE7: 2px, 其它：1px，在某些情況下可能有問題，這裡暫不討論。