不等高列表布局

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 265 次

FF9/Chrome15/Opera11/Safari5(win)/IE6、7、8、9我们做某些场频展示页面的时候，一般是用列表来组织产品结构，比如淘宝：这种结构一般都是每一项的高度固定，但是如果有

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等高列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>等高列表</title>
    <style type="text/css">
        *{ margin: 0; padding: 0;}
        body{ font-size: 12px;}
        ul{ list-style: none;}
        .ul_wrap{ border:3px solid #ff8c00;}
        .grid { width: 540px; overflow: hidden; _zoom:1;}
        .grid li{ width: 108px; margin: 3px; padding: 5px; border: 1px solid #d4d4d4;}
        .grid li a{ display: block; height: 108px; background: #4169e1;}
        .grid li p{ padding-top:8px;}

        .list_float li{ display: inline; float: left;}
        .list_inline{ font-size: 0; letter-spacing: -1px;}
        .list_inline li{ display: inline-block; *display:inline; *zoom: 1;  vertical-align: top; letter-spacing: normal; font-size: 12px;}
    </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>

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。