【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (12) 04-02 横幅や高さの指定で背景の範囲が変わる問題[未修正] | クリエイティブ

チャンネルナビゲーション
記事種別ナビゲーション
本文
関連情報

注目情報

特設サイトの必見情報

【特集】

CSS実装徹底検証! そこが知りたいInternet Explorer 7

12 04-02 横幅や高さの指定で背景の範囲が変わる問題[未修正]

2006/07/13

エ・ビスコム・テック・ラボ

これまでのIEでは、要素に対して横幅や高さを指定しているかどうかにより、背景部分が罫線に含まれるかどうかが変わるという問題があった。しかし、この問題はIE7 beta2でも修正されていない。

たとえば、サンプルソース4-2-1では、borderプロパティで罫線を、background-colorプロパティで背景色を指定している。罫線の種類は「dashed」と指定し、背景部分が罫線に含まれるかどうかわかるようにした。背景色は黄色に指定したため、赤い点線の間に黄色が表示されれば、背景部分に罫線が含まれていると判断することができる。

これをIE6で表示すると、図4-2-1aのようになる。横幅を指定していない文章Ａでは背景部分に罫線が含まれ、横幅を指定した文章Ｂでは含まれていないことがわかる。一方、IE7 beta2での表示は図4-2-1bのようになり、やはり問題が修正されていないことがわかる。


図4-2-1a:IE6での表示	図4-2-1b：IE7 beta2での表示

サンプルソース4-2-1

#a {border:dashed 20px red; background-color: yellow} #b {border:dashed 20px red; background-color: yellow; width:400px}

<p id="a">文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ文章Ａ</p> <p id="b">文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ文章Ｂ</p>

なお、CSSの標準規格では、バージョンによって背景とする範囲が異なっている。CSS2.0ではコンテンツとpaddingで構成される範囲を、CSS2.1(未勧告)ではコンテンツとpadding、borderで構成される範囲を背景としている。一方、CSS3(未勧告)ではコンテンツとpadding、borderで構成される範囲を背景としているが、background-clipプロパティによって背景の範囲をpaddingの端までと指定できるようにすることも提案されている。

また、FirefoxやOperaでは、罫線も背景部分に含んだ形で表示される。