谷歌浏览器清除：元素后离开，所有其他浏览器没有

Question

以下代码将在:before和:after伪选择器中呈现带有背景图像的按钮（链接），以获得灵活的交叉浏览结果。问题是，只有铬没有得到它（野生动物园，我不知道）。

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;
}

Google Chrome中的按钮：

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

的jsfiddle：

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

我已经尝试了不同的浮动/清除组合，但到目前为止还没有成功。

Answer 1

将显式宽度设置为.btn_container。这将解决你的问题。这是小提琴http://jsfiddle.net/K7y4U/6/

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

Answer 2

http://jsfiddle.net/K7y4U/20/

浮动和内联块不能一起播放。

.btn-container .btn {
    vertical-align:top;
    line-height:24px;
    display: inline-block;
    text-decoration: none;
    background: transparent url('http://img842.imageshack.us/img842/5052/kdti.png');
    padding: 0 0 0 6px;
    font-size: 11px;
    height:24px;
    font-weight: bold;
    color: red;
    font-family: Helvetica, Arial, FreeSans, Verdana, Tahoma, 'Lucida Sans', 'Lucida Sans Unicode', 'Luxi Sans', sans-serif;
    min-width: 90px
}
.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;
}
.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;
}
.btn-container .arrow-before-right:before, .btn-container .arrow-after-right:after, .arrow-link-container.arrow-before-right:before, .arrow-link-container.arrow-after-right:after {
    border-color: transparent transparent transparent blue;
}
.btn-container .arrow-before-down:before, .btn-container .arrow-before-left:before, .btn-container .arrow-before-right:before, .btn-container .arrow-before-up:before, .btn-container .arrow-after-down:after, .btn-container .arrow-after-left:after, .btn-container .arrow-after-right:after, .btn-container .arrow-after-up:after, .arrow-link-container.arrow-before-down:before, .arrow-link-container.arrow-before-left:before, .arrow-link-container.arrow-before-right:before, .arrow-link-container.arrow-before-up:before, .arrow-link-container.arrow-after-down:after, .arrow-link-container.arrow-after-left:after, .arrow-link-container.arrow-after-right:after, .arrow-link-container.arrow-after-up:after {
    border-width: .4em .45em;
    border-style: solid;
    content:'';
    display: inline-block;
    margin-left: .4em;
    vertical-align:top;
    margin-top:7px;
}