CSS: inline-block的應用和float塊高度塌陷

普通流高度塌陷：

當塊float浮動時，不會對塊佈局產生影響，塊仍然會按照左右或者上下的順序排列。可是會影響文檔的排列，當文檔的高度超過塊的高度時，塊的高度會產生塌陷現象。

 

高度塌陷解決方法：

 

閉合浮動：

1.在浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」>

2.<br clear="all" />原理相似上面

3.父元素設置 overflow:hidden; 在IE6中須要出發hasLayout，例如zoom:1。缺點： 會隱藏超太高度內容，同時有可能致使中鍵失靈

4.父元素設置 overflow：auto; 缺點：firefox某些狀況會形成內容全選；IE中 mouseover 形成寬度改變時會出現最外層模塊有滾動條等，firefox早期版本會無端產生focus等。

5.父元素設置浮動。缺點：父級相鄰元素產生影響。

6.父元素設置 dispaly:table。缺點：盒模型發生改變

7.使用:after 僞元素。在IE六、IE7中須要出發hasLayout，例如zoom:1。

 

 inline-block

 代碼：

　　display:inline-block; /* 現代瀏覽器 +IE六、7 inline 元素 */
　　*display:inline; /* IE六、7 block 元素 */
　　*zoom:1;

注：*是CSS hack 告知IE六、IE7調用

原理：

inline-block 的元素既具備 block 元素能夠設置寬高的特性，同時又具備 inline 元素默認不換行的特性。固然不單單是這些特性，好比 inline-block 元素也能夠設置 vertical-align 屬性。

 

應用：

<ul><li>能夠不用浮動來同行顯示，能夠用display:inline-block;實現，可是會產生間隙。

這是因爲一般狀況下，存在多個連續的空白符（空格，換行符，回車符等），瀏覽器會將他們合併爲一個空白符。

 

解決辦法：

HTML 中的換行符、空格符、製表符等產生了空白符，而這些歸根結底都是字符，那麼它們的大小都是受 font-size 來控制的，因此認爲空隙是固定的想法是錯誤的。因此調整空隙能夠用font-size:0。當對與chorme這樣的早期瀏覽器有最小字大小時（自chorme19後就支持font-size:0），咱們能夠用 -webkit-text-size-adjust:none來設置，可是會直接致使頁面文字沒法縮放，這對於用戶來講顯然是不友好的，因此要確保使用地方沒有大面積文字。

• Safari 5 依舊不支持 font-size:0 。6支持
• Firefox12，Opera 10 ，此次表現不錯，支持 font-size:0 。
• IE8 以上支持 font-size:0;
• IE六、7 inline 元素 inline-block 後設置 font-size:0 始終有 1px 的空隙。

 

在IE6 IE7中不產生空格緣由：

那麼爲什麼 IE六、7 block 元素沒有產生空隙呢？其實前面也提到了 IE 的 hasLayout，具備獨立性，因此產生 hasLayout 的元素之間表現出來互不影響，這也再次代表 IE六、7 中的 inline-block 不能等同於 CSS2.1 中的 inline-block。

 

具體步驟：

第一步：使用 font-size:0

經測試發現，chrome、firefox、IE8+、opera，inline 或 block 元素都沒有空隙了；

IE六、七、8（Q），inline 元素 inline-block 後始終存在 1px 左右的空隙。

第二步：能夠用letter-spacing:負值來調整

Safari 中 letter-spacing 負值的絕對值大於空隙大小後，內部會發生重疊。

第三步：word-spacing來調整IE6 7的1px 空隙

letter-spacing 和 word-spacing 同時使用可能致使衝突，因此咱們須要在 IE六、7 中 hack 掉 letter-spacing。

white-space：normal | pre | nowrap | pre-wrap | pre-line

 

默認值：normal

• normal：默認處理方式。
• pre：用等寬字體顯示預先格式化的文本，不合並文字間的空白距離，當文字超出邊界時不換行。可查閱 pre 對象
• nowrap：強制在同一行內顯示全部文本，直到文本結束或者遭遇 br 對象。
• pre-wrap：用等寬字體顯示預先格式化的文本，不合並文字間的空白距離，當文字碰到邊界時發生換行。
• pre-line：保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。

父元素代碼：

 

font-size:0;/* 全部瀏覽器 */
letter-spacing:-5px;/* Safari 等不支持字體大小爲 0 的瀏覽器 */
*letter-spacing:normal;
word-spacing:-1px;/* IE六、7 */ 

 

第四部，以上都是對父元素操做，子元素要重置正常值

子元素字體大小爲0了，子元素顯示爲空。同時字符間距和單詞間距重置爲默認值

子元素代碼：

font-size: 12px; letter-spacing: normal; word-spacing: normal;」

 

 

原文地址： http://www.iyunlu.com/view/css-xhtml/64.html