ff9/chrome15/opera11/safari5(win)/ie6、7、8、9
我們做某些場頻展示頁面的時候，一般是用列表來組織產品結構，比如**：
這種結構一般都是每一項的高度固定，但是如果有一項高度不固定的話，顯示就悲劇了。因為li的浮動就被前面那個高個兒截斷了，這一般也是浮動的悲哀。
現在我們轉換一下思路，去掉浮動，採用inline-block。
第乙個問題：
ie6/7並不支援這個屬性，所以hack一下（*display:inline; *zoom: 1;），於是要在所有的主流瀏覽器支援inline-block就可以這麼寫display: inline-block; *display:inline; *zoom: 1;當然，其他寫法就不多說了。
第二個問題：
除去ie系列的瀏覽器，其他的瀏覽器都不會忽略html**中回車帶來的空白字元，於是當採用inline-block的時候，我們會發現相鄰li之間有一段水平空白，至於空白多少視瀏覽器而定。最簡單的辦法，去掉html**中的回車符和空白符，才不採用各自權衡。第二種辦法就是設定外層ul的font-size為0，然後在設定li的font-size為正常值。這麼處理之後，在ff/chrome/opera下面都正常了。不過有個問題就是win下面的safari還是有1px的水平空白，奇葩了，我的解決辦法就是設定ul的letter-spacing: -1px;然後再設定li的letter-spacing: normal;
解決上面兩個問題之後，基本就可以做到各瀏覽器相容了（至於mac下面的safari我就不管了，窮b買不起也就懶得測了）。
下面是demo的html**：
demo
等高列表
>等高列表
title
>
<
style
type
="text/css"
>
*body
ul.ul_wrap
.grid
.grid li
.grid li a
.grid li p
.list_float li
.list_inline
.list_inline li
style
>
head
>
<
body
>
<
div
class
="ul_wrap"
>
<
ul class
="grid list_float"
>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
ul>
div>
<
div
class
="ul_wrap"
>
<
ul class
="grid list_inline"
>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
<
li>
<
a href
="">
a>
<
p>神一樣的隊友，神一樣的隊友，神一樣的隊友，神一樣的隊友
p>
li>
ul>
div>
body
>
html
>
瀑布流布局（等寬不等高jQuery）
body div id main div class box div class pic img src picture 1.png div div div class box div class pic img src picture 2.png div div div class box div...
等高布局 詳解
3 等高布局 height auto時的現象 height auto 全部都是內容撐開 每一列盒子高度同時變化,以最高的那列為基準 整個盒子的高度應該取決於最高的那列 3 真等高 背景盒子法 原理 父盒子取決於內容盒子裡最高的盒子的高度 1.多列浮動併排 清除浮動影響 2.給最外側的盒子再套幾個盒子...
偽等高布局
偽等高布局title charset utf 8 name viewport content width device width initial scale 1.0 type text css container box1 box2 box1 box2 clearfix after box3 bo...