スタイルシートをめぐる冒険

CSSトラブルシューティング / ソースの記述

ブロックレベル要素は左右マージンの値をautoにすることによってセンタリングされる。ところが、テーブルについては、その記述のしかたによってセンタリングされない時がある。
[該当するブラウザ]
Macintosh／IE5.0、IE5.1

症状

幅・高さとも50ピクセルで背景色が黒のテーブルをセンタリングさせるために、マージンを「margin: 0 auto」と上下左右まとめて設定してみた（→サンプルページ1）。しかし、各種ブラウザで検証したところ、Macintosh版のIE5.1、5.0ではセンタリングされないことがわかった。

【スタイルシート】

#centering {
    width: 50px;
    height: 50px;
    background-color: #000000;
    margin: 0 auto;
}

【HTML】

<table id="centering">

<tr>

<td></td>

</tr>

</table>

原因

Macintosh版IE5.1、5.0のバグと思われる。

対策

上下左右まとめてではなく、「margin-right: auto; margin-left: auto」と設定すればOK（→サンプルページ2）。Windowsで作業していると気が付きにくいが、テーブルをセンタリングさせる時は、左右マージンを別々に設定すると覚えておこう。

赤字は変更部分（HTMLは変更なし）
【スタイルシート】

#centering {
    width: 50px;
    height: 50px;
    background-color: #000000;
    margin-left: auto;
    margin-right: auto;
}

(last modified: 09/12/2008)

TrackBack

このエントリーのトラックバックURL:
http://norisfactory.com/mt/mt-tb.cgi/9

contents

CSS実験室

CSSトラブルシューティング

-- background関連 --

-- float関連 --

-- ソースの記述 --

-- ボックス関連 --

-- 定義リスト関連 --

-- 標準モードと互換モード --

feed

このサイトは、Creative Commons License のもとにライセンスされています。