IE8で修正されたCSSとHTMLおよびXHTML関連のバグ

エ・ビスコム・テック・ラボ
2009-04-21 18:32:01
  • このエントリーをはてなブックマークに追加

5. 重なりの順序がおかしくなる問題

 z-indexプロパティを利用すると重なりの順序を指定することができる。たとえば、サンプル05では、IE8のようにオレンジ色の「A」が上にくるように指定している。

 しかし、古いIEではz-indexで重なりを指定した要素の親要素にpositionを指定した場合、重なりの順序がおかしくなるという問題が発生していた。

サンプル05

IE8の表示 IE8の表示
IE7の表示 IE7の表示
#container-a{
position: relative;
}

#a{
background-color: orange;
position: absolute;
left: 80px;
top: 50px;
z-index: 2;
}

#b{
background-color: yellow;
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
}

A

B

ブラウザで表示を確認する

6. キャプションのマージンが消える問題

 テーブルのキャプションにマージンを指定すると、IE8のように表示される。サンプル06の場合、キャプションの上下に20ピクセルのマージンを入れているが、古いIEではマージンが消えていた。

サンプル06

IE8の表示 IE8の表示
IE7の表示 IE7の表示
caption{
background-color:yellow;
margin:20px 0;
}
キャプション
ABC
DEF
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]