ボタンを柔軟なサイズに保つために、両端に「キャップ」があり、背景が繰り返されているボタンを作成しようとしています。
これを行うために、CSSのと疑似要素を使用し:before
、:after
メインposition:absolute
ボタンの背景で覆われたスペースの外に配置しました(負の値を使用)。
FFとChromeで動作しますが、IE8と9のように見えますが、画像はそこにありますが、ボタンの「外側」にあるため、非表示になっています。これらの疑似要素をボタンの「外」にポップしてレンダリングする方法を知っている人はいますか?
HTMLを要素だけに留めておきたいので、<button></button>
SASSを使用しています。ここでjsFiddleを見ることができます:http://jsfiddle.net/Dqr76/8/または以下のコード:
button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;
&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}
&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}
ちなみに、誰かがそれを提起する前に、これらの疑似要素は<IE8では機能しないことを知っており、この問題に影響を与えない回避策を作成しました。