IE6での角丸ボックスの表示くずれ


基金訓練に行ってきました。(41日目)」の中で、角丸の背景ボックスの作り方を書きましたが、その2で書いたやり方では、IE6で表示すると、上端画像の下と、下端画像の上に隙間ができるようです。
なので、その対策を書いてみたいと思います。

角丸の背景のボックスを作る。(IE6対応)

文字文字文字文字文字文字
文字文字文字文字文字文字
↑こんな風にしたいとき。 でも、IE6では↑

対策例

.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%;
}
<div style="box">
<div style="bgTop"></div>
<div style="bgCenter">
文字文字文字文字文字文字
</div>
<div style="bgBottom"></div>
</div>

  • 前回の内容に、ハイライト部分を追加しました。
  • 上下端の画像の背景を透明にする必要があります。
  • 上下端の画像サイズは、幅100px、高さ10pxです。

  • 人気ブログランキングへ
  • FC2ランキングへ
  • ブログランキング・にほんブログ村へ
  • おきてがみ

関連記事

カテゴリー:HTML
.

コメントを残す