CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い

CENTER 要素は、HTML 4 （及び XHTML）で非推奨要素に指定され、HTML5 で完全に廃止されていますが、間違って使われてしまった場合、Google Chrome( と Firefox は同じ ) と IE11 では全く表示が異なる場合があります。

DIV 要素を position:relative でラッパーにして、内部に position:absolute を指定しますが、DIV 要素は CENTER 要素によって中央に表示されるのですが、中の要素の位置が、Google Chrome と Firefox では、中央の軸が左端になって表示されます。これに関しては、IE11 の、DIV の左端に表示されるのが正しいと思うのですが、そもそも CENTER 要素を使う事が間違っているのでなんとも言えません。( 本来は、ラッパーに対して margin:auto を指定して、ラッパーの親要素の幅に対して中央位置に配置する )

Google Chrome と Firefox



IE11

<center>
<div style='position:relative;width:400px;height:350px;border:solid 1px #ccc;'>
<img src="https://lh3.googleusercontent.com/-CWeNDTCMQRI/VF4sSgumWgI/AAAAAAAAXdQ/Ug4sBf9sB_I/s300/_img.png" style="position:absolute;border: solid 1px #000000">
</div>
</center>

▼ CENTER で表示

<div style='position:relative;width:400px;height:350px;border:solid 1px #ccc;margin:auto'>
<img src="https://lh3.googleusercontent.com/-CWeNDTCMQRI/VF4sSgumWgI/AAAAAAAAXdQ/Ug4sBf9sB_I/s300/_img.png" style="position:absolute;border: solid 1px #000000">
</div>

▼ margin:auto で表示

※ IE11 ではどちらも同じ表示になります

HTML / CSS

タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する

A 要素と CSS だけでボタンを表現する 『BUTTONS』

BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』

INPUT type="number" の振る舞いをブラウザ間で調整する

META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。

CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認

ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ

IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol

CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い

TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する

HTML : 画像を使ったボタンのバリエーション

Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する

WEB フォントの記述方法の考察

これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整

Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。

CSS3 の角丸を IE8以前でも使うには( ブログで使うには )

CSS : display / vertical-align