「基金訓練に行ってきました。(41日目)」の中で、角丸の背景ボックスの作り方を書きましたが、その2で書いたやり方では、IE6で表示すると、上端画像の下と、下端画像の上に隙間ができるようです。
なので、その対策を書いてみたいと思います。
角丸の背景のボックスを作る。(IE6対応)
|
文字文字文字文字文字文字
|
文字文字文字文字文字文字
|
| ↑こんな風にしたいとき。 | でも、IE6では↑ |
対策例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.box .bgTop { background-image: url(bgtop.gif); background-repeat: no-repeat; background-position: center top; width: 100px; height: 10px; font-size:0.1%; } .box .bgCenter { width: 84px; background-color: #0FF; padding-right: 8px; padding-left: 8px; } .box .bgBottom { background-image: url(bgbottom.gif); background-repeat: no-repeat; background-position: center bottom; width: 100px; height: 10px; font-size:0.1%; } |
|
1 2 3 4 5 6 7 |
<div style="box"> <div style="bgTop"></div> <div style="bgCenter"> 文字文字文字文字文字文字 </div> <div style="bgBottom"></div> </div> |
- 前回の内容に、ハイライト部分を追加しました。
- 上下端の画像の背景を透明にする必要があります。
- 上下端の画像サイズは、幅100px、高さ10pxです。
