inline-block 屬性分析 2010-03-23 摘錄: ie6，ie7的haslayout屬性是個讓人頭疼的問題。在做導航條的時候，一般會用到ul li結構，大多數時候我們是把li設定為浮動，讓其併排顯示在同一行。還有一種方法就是設定li為display:inline;這樣可以達到同樣的效果，但是問題是inline元素的特性：預設無法設定寬度，高度，以及上下margin，（關於padding，情況有點特殊，在ie6，7中inline元素是無法設定上下padding的，但是在標準瀏覽器裡面是可以設定上下padding的）。 鑑於inline元素的這種特性，如果我們不浮動並且想讓li顯示在一行，而且可以設定高度，寬度以及上下margin，上下padding等屬性，應該怎麼辦呢？你一定會想到乙個屬性display:inline-block;對！」inline-block」就是幹這個事的，讓乙個元素既不換行又具有block元素的特性。不過有點小問題，讓我們看**： view sourceprint?01 02 03 04
05 display-block 0616 17 18
24 25 上面的例子，在firefox，opera等標準瀏覽器裡面已經達到效果了，但是在ie6和ie7下卻發現每個li元素仍然獨佔一行，（關於margin合併的問題日後再說）。這是因為ie6和ie7並不完全支援inline-block這個屬性值。通過上面的例子會發現加不加display:inline-block;對於它們完全沒有任何影響。 那麼讓我們來想辦法解決這個問題，這就涉及到ie6，7中的haslayout屬性了。ie6，7中的inline元素有個特殊的情況，就是觸發了ie的haslayout屬性以後就擁有了layout。此時inline元素的表現和標準瀏覽器裡面的inline-block元素基本相同。看下面這個例子，我們用ie的私有屬性zoom來觸發haslayout，然後看看inline元素的表現。 view sourceprint?01 02 03 04
05 display-block 0609 10 11
span 12 13 可以看到在ie6，7中inline元素span已經表現得和乙個display:inline-block元素一摸一樣了，但是在標準瀏覽器中span仍然是行內元素（寬高以及上下margin都無效）。 如果宣告了不正確dtd，導致ie6在quirks 模式下解析，那麼ie6會自動觸發inline元素的haslayout，不過這裡只討論正常情況下的解析，所以加了個zoom:1來觸發haslayout;zoom的值設定為除了auto外的任何值都會觸發haslayout，之所以經常用zoom:1;是因為zoom這個屬性本身是ie的縮放屬性，設定為其他值會導致元素在ie下變形，設定為1既是保持原形不縮放。 了解了上面的情況，我們就可以來解決之前那個問題了。可以改原先的css**如下： view sourceprint?01 li 讓標準瀏覽器識別display:inline-block;讓ie6，7識別display:inline;來覆蓋上面的display:inline-block;（我為什麼要說」覆蓋」？）。然後通過zoom:1;來觸發haslayout讓inline元素在ie中表現得和inline-block元素一樣。 view sourceprint?01 02 03 04
05 display-block 0619 20 21
27 28 可以看到，現在在各瀏覽器裡面的顯示已經一致了。li元素都顯示在同一行。 不過我上面問了：為什麼要說覆蓋？ 假如我們把上面的css**中的 view sourceprint?1 display:inline-block; 2 *display:inline; 兩句調換一下順序會怎樣？你會發現display:inline-block;覆蓋了*display:inline;導致在ie6，7中原先的樣式又失效了，這說明什麼？說明ie6和ie7是認識display:inline-block的，所以我在前面說」不完全支援」而沒有說」完全不支援」，嘿嘿，我可沒有打自己嘴巴。之所以說」不完全支援」是因為還是有一點作用，雖然display:inline-block對ie6，7中的元素表現沒有任何直接影響，但是它會觸發inline元素的haslayout。只有這乙個作用，讓我們再回到前面的例子： view sourceprint?1 span view sourceprint?01 02 03 04
05 display-block 0609 10 11
span 12 13 可以看到，我們把zoom:1換成了display:inline-block以後，在ie6，7中span仍然和firefox等標準瀏覽器下一樣，具有了設定的寬高和上下margin，上下padding。它表現得和display:inline-block同學一樣好，不過這並不是因為display:inline-block這條宣告直接生效了，而是因為display:inline-block觸發了ie的haslayout屬性，使得inline元素具有了inline-block的表現。
模擬相容性的 inline block 屬性
一年前網上還找不到關於 inline block 屬性的文章，為了方便大家更好的理解該屬性，當時總結整理了篇 display inline block的深入理解 而現在對於 inline block 屬性運用的需求也越來越多，可惜依舊只有 firefox3 beta ie8 beta opera s...
inline block消除間隙
真正意義上的inline block水平呈現的元素間，換行顯示或空格分隔的情況下會有間距，很簡單的個例子 消除間隙一 消掉空格的三種方法 space a1 a a2 a a3 a div space a1 a a2 a a3 a div space a1 a a2 a a3 a div 消除間隙二 ...
border image屬性分析
沒用border image之前，覺得css的屬性基本夠用，border image完全是將簡單的工作複雜化，當學習完該屬性以後，發現該屬性的運用能夠大大節省編碼時間和效率，總結一下，大致適用於以下兩個場景 元素邊框不規則的情況。這時候，就需要用設計圖作為邊框背景，border image與back...