Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2009-07-06

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

オリジナル uuAltCSS.js を導入
IE6f:id:uupaa:20090706225235p:imagef:id:uupaa:20090706223317p:image
IE7f:id:uupaa:20090706225236p:imagef:id:uupaa:20090706223316p:image
Safari4f:id:uupaa:20090706223318p:imagef:id:uupaa:20090706223318p:image
<!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 を導入
IE6f:id:uupaa:20090630075320p:imagef:id:uupaa:20090706223319p:imagef:id:uupaa:20090630102015p:image
IE7f:id:uupaa:20090630075321p:imagef:id:uupaa:20090706223320p:imagef:id:uupaa:20090630102016p:image
IE8f:id:uupaa:20090630102018p:imagef:id:uupaa:20090630102018p:imagef:id:uupaa:20090630102017p:image

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


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

なるといいね。

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


参考

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


追記

何がうれしいかというと、「段の高さを揃えた段組み」が、CSSレベルで出来る点です。

float + CSS Hack + js でも同様のことが(頑張れば)できますが、終電で帰らなくても出来るようになるので「うれしい」かなと。

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