使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu

使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu

 闲着发疯, 使用 IE 条件注释+DIV+CSS 模拟了个表格布局, 兼容我认为是主流浏览器的浏览器....没了.
 
 目录:
 1. 内容
 
 shawl.qiu
 2006-12-17
 http://blog.csdn.net/btbtd
 
 1. 内容

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--[if IE]>

<style type="text/css">

.table {

 display:inline;

 border-top:1px solid black;

 border-right:1px solid black;

}

.row {

 border-left:1px solid black;

}

.cell {

  border-right:1px solid black;

 border-bottom:1px solid black;

 width:24%;

 overflow:hidden;

 display:inline;

}

</style>

<![endif]-->

<!--[if !IE]><-->

<style type="text/css">

.table {

 display:table;

 border-top:1px solid black; 

 border-left:1px solid black;

 width:96%;

}

.row {

 display:table-row;

}

.cell {

 display: table-cell;

 border-right:1px solid black;

 border-bottom:1px solid black;

 width:24%;

}

</style>

<!--><![endif]-->

<div class="table">

 <div class="row">

  <div class="cell">aaa</div>

  <div class="cell">bbbbbbbbbbbbbbbb</div>

  <div class="cell">ccc</div>

  <div class="cell">d</div>

 </div>

 <div class="row">

  <div class="cell">aaa</div>

  <div class="cell">bbbbbbbbbbbbbbbb</div>

  <div class="cell">ccc</div>

  <div class="cell">dddddddddddddddd</div>

 </div>

 <div class="row">

  <div class="cell">aaa</div>

  <div class="cell">bbbbbbbbbbbbbbbb</div>

  <div class="cell">ccc</div>

  <div class="cell">dddddddddddddddd</div>

 </div>

</div>