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

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

3. 背景画像の指定で文字が消える問題

 IE8ではbackground-imageプロパティによる背景画像の指定で文字が消える問題が修正された。

 たとえば、サンプル03では

でマークアップした見出しに対して「background-image:none」と指定している。この場合、IE8のように見出しの背景は透明になり、親要素に指定した花柄の背景画像が表示される。

 しかし、古いIEでは見出しの文字が消えてしまうという問題が発生していた。

サンプル03

IE8の表示 IE8の表示
IE7の表示 IE7の表示
div{
background-image: url(back.png);
}

h1{
background-image: none;
}

見出し

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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

4. 垂直方向の位置揃えの問題

 垂直方向の位置揃えを指定するvertical-alignプロパティの値のうち、IE8は古いIEで問題のあった「top」と「bottom」をきちんと表示できるようになった。

 たとえば、サンプル04で「top」および「bottom」と指定した黄色と青色の花の画像は、IE8のようにオレンジの枠で示したラインボックスの上下に揃えて表示される。それに対して、「text-top」および「text-bottom」と指定したピンク色と緑色の花の画像は、赤い枠で示した文字の高さの上下に揃えて表示される。

 古いIEでは「top」および「bottom」と指定しても、「text-top」や「text-bottom」と同じ表示になっていた。

サンプル04

IE8の表示 IE8の表示
IE7の表示 IE7の表示
#top{vertical-align:top}

#bottom{vertical-align:bottom}

#texttop{vertical-align:text-top}

#textbottom{vertical-align:text-bottom}

Text image image image image

ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]