1

: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/

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

4

2 回答 2

0

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;
}
于 2013-07-22T13:39:49.520 回答
0

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

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

于 2013-07-22T12:59:56.713 回答