無序列表ul在IE6 IE7中下邊距bug

2021-08-29 21:50:46 字數 808 閱讀 6779

實現超過寬度的時候的橫向排列,逆向思維

1.外層box width短 overflow:hidden

2.內層box width長 overflow:hidden

3.ul,li在ie系列下margin-bottom bug,ie6在奇數時顯現此bug

解決方法:li---->>float-------->>display:inline;然後在對ie系列作* hack處理

2.如果是等間距換種方法:li用右上margin,ul用左下padding

看看人家的筆記在對付li列表排列的時候的處理,也是借用這種思路.

我們先建立乙個示例片段:

最優的清除浮動:

.wrap

.wrap:after

[color=red]但這樣做有個問題要注意:用zoom:1的話,在ie7下面裡面的元素如果有margin-bottom,那最下面的元素的margin-bottom會失效。[/color]

不是浮動引起的,,是ie在li列表排列的乙個的乙個bug,

所以最優、最精簡的列表浮動樣式是:

.wrap

.wrap:after

.wrap li

優點解釋一下:

1.防止了ie7的margin-bottom的bug

2.防止了overflow和display:table的bug

3.最少的**實現標籤瀏覽器的清除浮動

4.防止了裡面元素的雙倍margin

IE6 IE7下 inline block解決方案

ie6 ie7下對display inline block的支援性不好。1 inline元素的display屬性設定為inline block時,所有的瀏覽器都支援 2 block元素的display屬性設定為inline block時,ie6 ie7瀏覽器是不支援的 物件呈遞為內聯物件,但是物件的...

IE6 IE7下 inline block解決方案

ie6 ie7下對display inline block的支援性不好。1 inline元素的display屬性設定為inline block時,所有的瀏覽器都支援 2 block元素的display屬性設定為inline block時,ie6 ie7瀏覽器是不支援的 物件呈遞為內聯物件,但是物件的...

IE6 IE7下 inline block解決方案

ie6 ie7下對display inline block的支援性不好。1 inline元素的display屬性設定為inline block時,所有的瀏覽器都支援 2 block元素的display屬性設定為inline block時,ie6 ie7瀏覽器是不支援的 物件呈遞為內聯物件,但是物件的...