css - 谷歌浏览器清除 :after-element left, 所有其他浏览器不

Question

以下代码将在 :before 和 :after 伪选择器中呈现一个带有背景图像的按钮(链接)，以获得灵活的交叉浏览结果。问题是，只有 chrome 不明白(safari，我不知道)。

HTML:

<div class="btn-container align-right more-info-btn">
        <a class="btn" href="#">Super Button<i class="arrow-after-right"></i>
    </a>
</div>

CSS:

.btn-container .btn {
    display: inline-block;
    text-decoration: none;
    height: 24px;
    background: transparent url('http://img842.imageshack.us/img842/5052/kdti.png');
    padding: 0 6px;
    font-size: 11px;
    line-height: 21px;
    font-weight: bold;
    color: red;
    font-family: Helvetica, Arial, FreeSans, Verdana, Tahoma, 'Lucida Sans', 'Lucida Sans Unicode', 'Luxi Sans', sans-serif;
}
.btn-container .btn:before {
    content:'';
    display: inline-block;
    background: transparent url('http://img600.imageshack.us/img600/3825/6ppo.png') no-repeat;
    width: 4px;
    height: 100%;
    margin-left: -10px;
    float: left;
}
.btn-container .btn:after {
    content:'';
    display: inline-block;
    background: transparent url('http://img834.imageshack.us/img834/4803/b5zs.png') no-repeat;
    width: 4px;
    height: 100%;
    margin-right: -10px;
    float: right;
}

谷歌浏览器中的按钮:

所有其他浏览器中的按钮:

jsFiddle:

http://jsfiddle.net/K7y4U/4/

我已经尝试过不同的 float/clear 组合，但到目前为止都没有成功。

Answer 1

为 .btn_container 设置一个明确的宽度。那会解决你的问题。这是 fiddle http://jsfiddle.net/K7y4U/6/

我做了:.btn-container .btn { width: 90px; }