display: table, display: table-cell を IE6, IE7 で使えるようにした

JavaScript CSS
オリジナル uuAltCSS.js を導入
IE6
IE7
Safari4 
<!doctype html><html><head><title></title>
<style>
.cell1, .disptblcell1 {
  width: 20%;
  background-color: #FFCC66;
}
.cell2, .disptblcell2 {
  width: 29%;
  background-color: #CC6633;
}
.cell3, .disptblcell3 {
  width: 30%;
  background-color: #FF9966;
}

.disptbl { display: table; }
.disptblcell1 { display: table-cell; }
.disptblcell2 { display: table-cell; }
.disptblcell3 { display: table-cell; }

.top { vertical-align: top }
.middle { vertical-align: middle }
.bottom { vertical-align: bottom }
.left { text-align: left }
.center { text-align: center }
.right { text-align: right }
</style>
</head><body>

<table class="tbl">
  <tbody>
  <tr>
    <td class="cell1">navigation</td>
    <td class="cell2">content</td>
    <td class="cell3">sidebar</td>
  </tr>
  </tbody>
</table>

<hr />

<div class="disptbl">
  <div class="disptblcell1 top left">navigation<span>|span|</span><p>|p|</p></div>
  <div class="disptblcell2 middle center">content<span>|span|</span><p>|p|</p></div>
  <div class="disptblcell3 bottom right">sidebar<span>|span|</span><p>|p|</p></div>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>

<hr />

<ul class="disptbl" style="margin: 0; padding: 0">
  <li class="disptblcell1 top left">navigation<span>|span|</span><p>|p|</p></li>
  <li class="disptblcell2 middle center">content<span>|span|</span><p>|p|</p></li>
  <li class="disptblcell3 bottom right">sidebar<span>|span|</span><p>|p|</p></li>
</ul>

</body></html>

Acid2

オリジナル uuAltCSS.js を導入 IE8.js を導入
IE6
IE7
IE8

Acid2 では、アゴの黒い線が display:table と display:table-cell でレンダリングされています。

CSS Hack という言葉が過去のものに

なるといいね。

uuAltCSS.js では CSS Hack の類は一切使えません。CSS Hack のドメインは、コンディショナルセレクタが解決します。

参考

以下の記事を参考にしました。

追記

何がうれしいかというと、「段の高さを揃えた段組み」が、CSSレベルで出来る点です。
float + CSS Hack + js でも同様のことが(頑張れば)できますが、終電で帰らなくても出来るようになるので「うれしい」かなと。

CSS3 の仕様を完全に模倣するのはさすがに厳しいものがあったので、とりあえず何とか使えるレベルの実装をほどこしてあります。細かい差異はおいおい実装していきます。