我试图用CSS做一些漂亮的,灵活的箭头按钮只使用旋转。问题在于Firefox似乎将箭头部分与所有其他浏览器略有不同。添加Firefox唯一样式当然可以解决这个问题,但有没有更优雅的方式?Firefox的绝对定位问题与旋转变换
HTML如下
<span class="arrow-box left">Previous button</span>
<span class="arrow-box right">Next button</span>
CSS如下:为Chrome,IE,Safari浏览器
.arrow-box { line-height:34px; border:2px solid #7E95AF; padding:8px 20px; z-index:10; font-family:Arial; font-weight:bold; font-size:12px; border-radius:5px; background-color:#EEE; position:relative; }
.arrow-box.left { border-left:0; }
.arrow-box.right { border-right:0; }
.arrow-box.left::before,
.arrow-box.right::after { content:""; display:block; width:24px; height:24px; transform:rotate(45deg); -webkit-transform:rotate(45deg); z-index:-1; position:absolute; border-style:solid; border-color:#7E95AF; border-radius:5px; background-color:#EEE; }
.arrow-box.left::before { top:2px; left:-10px; border-width:0 0 2px 2px; }
.arrow-box.right::after { top:2px; right:-10px; border-width:2px 2px 0 0; }
工作版本:http://jsfiddle.net/YWnzc/356/
工作版本的Firefox:http://jsfiddle.net/YWnzc/352/
作为参考,其中包括Firefox的唯一的CSS小提琴是这里http://jsfiddle.net/YWnzc/358/ – woodstock