我想创建与两端“帽”，并重复背景的按钮，以保持该按钮灵活大小。
为了做到这一点，我已经使用:before和:after在CSS伪元素，伴随着position:absolute得到它的主要按钮的背景覆盖的空间之外（使用负值）。
它的工作原理在FF和Chrome，但它看起来像在IE8和9，图像是存在的，但“外面”的按钮，并因此被隐藏。 有谁知道如何弹出这些伪元素“OUT”按钮，使他们呈现？
我想保持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工作，并创建了一个变通未影响这个问题。
