クロスブラウザなtableタグとCSS

Firefox2ではセルのborderの半分とpaddingが列のwidthに含まれている。 IE6,7ではセルのpaddingが列のwidthに含まれていない。

http://www.d-spica.com/try/table-width.html

　この一文凄い大事。最近javascriptでテーブルの位置を動かしたりするのを作ってたら、テーブル作ったら何故かずれる。しかもテーブルって升目上なんで少しずれてるのが非常に目立つ。ずれる理由が分からずに散々探して、この上の一文を発見。参考にしつつ色々やってたら大体Firefox3とIE8の見た目を合わせることは出来た。しかし、色々類似の古いクロスブラウザの話ばかりがでて的確な情報がないのであえて見つけやすいようにピックアップ。実際にやった場合だと単純に文章どおり位置がずれるだけではなく、CSSでwidth指定する場合、テーブルタグはブラウザ独自の動きを色々する。幾つか気付いたのをあげておく。

・DOCTYPE スイッチで条件がかなり変わる。まずこれが凄く大きい。
・tableタグにtd要素のwidth幅より大きい、width指定をしたとき、Firefox3ではtableの幅に合わせセルのwidthを均等に分散。IE8ではセルは左寄せで右に余白が出来る。

　IE8とFirefox3とかの新しいブラウザの場合、クロスブラウザだけではなく後方互換の関係で「DOCTYPE スイッチ」などの仕様さでさらにそれぞれの条件ごとに細々と問題点があるので、違う問題で表示が変な場合はDOCTYPEスイッチもチェックした方がいい。

標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
http://2xup.org/log/2007/07/27-2111