以下代码将在: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:
我已经尝试了不同的浮动/清除组合,但到目前为止还没有成功。
答案 0 :(得分:0)
将显式宽度设置为.btn_container。这将解决你的问题。这是小提琴http://jsfiddle.net/K7y4U/6/
我做了:.btn-container .btn { width: 90px; }
答案 1 :(得分:0)
浮动和内联块不能一起播放。
.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;
}