first-line伪类下兼容的宽度自适应按钮实例页面

CSS代码：

.dib { display:inline-block; }

.button {
    display: block;
    padding: 9px 1em 11px;
    font-size: 14px;
    line-height: 16px;
    background:url(/study/image/gray_baidu_btn.png) no-repeat right -36px;
    text-align: center;
    color: #333;
    position: relative;
    *position: static;
}
.button:before {
    content: '';
    width: 5px;
    height: 35px;
    background:url(/study/image/gray_baidu_btn.png) no-repeat;
    position: absolute;
    left: 0; top: 0;
}
.button:first-line {
    *background: url(/study/image/gray_baidu_btn.png) no-repeat;
}
                

HTML代码：

<div id="outWidth" style="width:150px;">
    <a href="#" class="button">我是按钮</a>
</div>
<p><button id="buttonWidth">点击来个其他宽度</button></p>
<h4>以下为外标签inline-block下的自适应效果：</h4>
<span class="dib"><a href="#" class="button">天气炎热</a></span><br />
<span class="dib"><a href="#" class="button">技术探讨冷清</a></span><br />
<span class="dib"><a href="#" class="button">活脱脱的大对比啊</a></span><br />
<span class="dib"><a href="#" class="button">莫非受经济影响？</a></span>
                

JS代码：

(function() {
    var eleBtn = document.getElementById("buttonWidth"),
        eleWidth = document.getElementById("outWidth");
    // 点击宽度100~200之间随机改变
    eleBtn.onclick = function() {
        eleWidth.style.width = (100 + 100 * Math.random()) + "px";
    };    
})();