DIV+CSS实现表格功能（不支垂直居中）

对于不支持display:table-cell属性的IE6/7浏览器，又当如何解决呢？

我们可以使用“补差等高法”，就是一个一个很大的margin-bottom负值配上一个同样大小的padding-bottom值。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>DIV+CSS实现表格功能（不支垂直居中）</title>
 <style type="text/css">
 <!--
 * {
  font:12px 宋体;
 }
 .ul_table {
  width:933px;
  border-left:#B0B9D1 solid 1px;
  border-bottom:#B0B9D1 solid 1px;
  padding:0;
  overflow:hidden;
 }
 .ul_table ul {
  list-style-type:none;
  margin:0;
  padding:0;
  clear:both;
 }
 .ul_table ul li {
  line-height:24px;
  border-right:#B0B9D1 solid 1px;
  border-top:#B0B9D1 solid 1px;
  margin:0;
  padding:5px;
  padding-bottom:100px;
  margin-bottom:-95px;
  float:left;
 }
 .one {
  width:200px;
  text-align:center;
 }
 .two {
  width:500px;
  word-wrap:break-word;
  overflow: hidden;
 }
 .three {
  width:200px;
  text-align:center;
 }
 .four {
  width:711px;
  word-wrap:break-word;
  overflow: hidden;
  background:#FFFFFF;
 }
 -->
 </style>
 </head>
 
<body>
 <div class="ul_table">
   <ul>
     <li class="one">编号</li>
     <li class="two">内容</li>
     <li class="three">日期</li>
   </ul>
   <ul>
     <li class="one">001</li>
     <li class="two">内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three</li>
     <li class="three">2012-12-3 14:02:09</li>
   </ul>
   <ul>
     <li class="one">001</li>
     <li class="four">内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three内容one\two\three</li>
   </ul>
 </div>
 </body>
 </html>
 

参考：

http://bbs.blueidea.com/thread-2834076-1-1.html

http://www.zhangxinxu.com/wordpress/?p=1187