background-position と border の関係

Standards mode での背景画像の位置とボーダー

実験

この画像ファイル

上記イメージ(50 × 50px)を背景画像に指定してします。

1

上記は width : 50px ; height : 50px ; background-position : top left ; border : 1px solid red ;

2

上記は width : 50px ; height : 50px ; background-position : top left ; border : 20px solid red ;

3

上記は width : 50px ; height : 50px ; background-position : center right ; border : 20px solid red ;

4

上記は width : 50px ; height : 50px ; background-position : center right ; border-left : 20px solid red ; border-right : 20px solid red ;

5

上記は width : 50px ; height : 50px ; background-position : center center ; border : 20px solid red ;

検証

MacIE5.14 で閲覧した場合、背景画像の位置がボーダー外側(境界辺)から計算されて配置されているので、背景画像の上下 20px、左右 20px がボーダーに隠れて見えなかったりする。

これに対し Mozilla や WinIE6 とかは、ボーダー内側(パディング辺)から計算されて配置されているので、背景画像は中心に収まる。【Colors and backgrounds】の通りで、Mozilla や WinIE6 とかが正しい。

のだが、上の見出し「検証」を見て欲しい。


h3{
	margin : 2em 100px 0 0 ;
	padding : 0.25em 0 0.25em 0.5em ;
	font-size : 150% ;
	font-weight : normal ;
	color : #333333 ;
	border-left : 20px solid red ;
	border-right : 20px solid red ;
	background-color : white ;
	background-image : url(../../Images/back50.jpg) ;
	background-repeat : no-repeat ;
	background-position : center right ;
}

というようなスタイルなのだが、WinIE6 でも背景画像が右ボーダーに埋もれてしまう。これは、width 、若しくは height を指定することにより回避することが出来る。

書いた人

カナかな団首領 2002-08-06T14:21:19+09:00