Semantic Web – WordPress

Windows Internet Explorer 6.0-textAlign property-bug-CSS Margin Property

leave a comment »

 http://en.wikipedia.org/wiki/Internet_Explorer
Browser Market Share in April 2007
 Internet Explorer, All Versions 78.03%
 Internet Explorer 4    0.05%
 Internet Explorer 5, 5.5  0.52%
 Internet Explorer 6    46.82%
 Internet Explorer 7    30.56%
 Other Browsers       21.97%

2007年4月以降のデータをみると、Internet Explorer 6のシェアは40%台まで降下しています。

Windows版 Internet Explorer 6 : text-alignプロパティがテーブルやdivなどのブロックレベルの要素全体に有効となってしまうバグ bug
バグ「HTML作成時、text-align: center とすると、中身のブロックレベル要素まで中央寄せとなる」
がとても目立つようになりました。IE 6.0全盛のとき、このバグを意図的に利用したり、バグでないと誤解した方も多いと思います。

バグ回避のために、!DOCTYPE スイッチを下記のように【標準準拠モード有効とする方法があります。有効に変更した後、ホームページのレイアウト全体を必ず確認することが大切です。

Internet Explorer 7, Firefox 2.0 1.5 1.0, Safariなどで閲覧すると、Internet Explorer 6とはブロック要素の位置が異なる(たとえば、中央寄せ・揃えとなっていない)原因は、

<center> </center>
<div align="center"> </div>
と同じように
<table style="text-align:center;">
と指定したためです。
text-alignプロパティは本来、テキストや画像などのインライン要素だけの水平方向を揃えるプロパティです。
よって、バグ bugのないバージョンのIEやブラウザ Firefoxでは、text-alignプロパティはブロック要素に影響(反映)しません。
ブロック要素全体の左右の余白を揃えるためには、marginプロパティを利用します。
たとえば、table(テーブル)の中のブロック要素を中央に揃えるとき、
<table style="margin-left: auto; margin-right: auto;">
となります。
参照ページ:
【HTMLタグの簡単検索】TAG index – Web制作情報
  http://www.tagindex.com/
 W3G – World Wide Web Guide
  http://w3g.jp/css/box/margin

※ !DOCTYPE スイッチと【標準準拠モード】
無 効
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

[[確認中]] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;

有 効
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

Written by support

2007/05/23 @ 08:42

カテゴリー: Tag

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。