In an effort to create a button using background images in the :before and :after pseudo-selectors for cross-browser compatibility, an issue arose where only Chrome did not display it correctly (Safari results were unknown).
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 Button Rendering:
Button Display in Other Browsers:
jsFiddle:
Attempts have been made to adjust float/clear settings with no success.