實現超過寬度的時候的橫向排列,逆向思維
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瀏覽器是不支援的 物件呈遞為內聯物件,但是物件的...