昨天群裡有人提出了這樣的問題:
為什麼在現代瀏覽器（谷歌、火狐、ie8/9）中顯示是這樣的：而在ie6/7中卻是這樣：
遇上這種盒裝模型撐不開的情況，我第一時間想到的是給父容器加overflow:hidden。但是，他上面已經加了。那是什麼原因呢？原因可能出在浮動上面，因為ie6/7對浮動的解析不同導致無法將容器撐開。於是我的建議是去掉li的浮動，用display:inline-block;來實現併排排列。css部分**如下：
*嗯，ie6/7問題解決了，可是新的問題又出現了！這是谷歌、火狐、ie8/9中的表現：.wrap
.wrap ul
.wrap li
li之間竟然出現了多餘的邊距。這不是雙邊距，是由於瀏覽器對li的解析不同，谷歌、火狐、ie8/9的li之間是有預設間距的，且無法通過padding:0; margin:0解決（這個間距其實是**中的換行符的字元間距
）。去掉li中的margin:0 10px 20px 0可以看出來。
谷歌、火狐、ie8/9中的效果:
ie6/7中的效果：
那怎麼辦？用浮動ie6/7出問題，用display:inline-block谷歌、火狐、ie8/9又不行！
我想出了兩種解決方式：
在原先**的基礎上，給父元素加*padding-bottom:20px;來解決。**如下：
*給改用display:inline-block的li裡再加上浮動。**如下：.wrap
.wrap ul
.wrap li
*不理解display:inline-block;*display:inline;zoom:1;的意思的，可以看下這篇文章：ie6/7下不同的inline-block.wrap
.wrap ul
.wrap li
ie67中li下的間隙問題
一 以下是引發此bug的條件 必要條件 li的子元素設定了浮動 例如 本例中的a設定了左浮動 充要條件 ie6 7 li設定了width height zoom 之一 例如 本文中的li設定了width 僅ie7 li設定了padding top padding bottom margin top ...
IE6,7下的那些坑
lang en charset utf 8 title type text css warp box style head class warp class box div div body html 在ie6 ie7,ie8,chrome,firefox顯示效果 當使box元素為浮動元素時 box...
IE6 7下如何實現inline block
ie6，ie7的haslayout屬性是個讓人頭疼的問題。在做導航條的時候，一般會用到ul li結構，大多數時候我們是把li設定為浮動，讓其併排顯示在同一行。還有一種方法就是設定li為display inline 這樣可以達到同樣的效果，但是問題是inline元素的特性 預設無法設定寬度，高度，以及...