html - Firefox绝对位置旋转旋转问题

我试图仅通过使用旋转使CSS看起来不错，灵活的箭头按钮。问题在于Firefox的箭头部分位置似乎与所有其他浏览器略有不同。当然，仅添加Firefox样式可以解决此问题，但是还有更优雅的方法吗？

HTML如下

<span class="arrow-box left">Previous button</span>&nbsp;&nbsp;
<span class="arrow-box right">Next button</span>

CSS如下

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

Chrome，IE，Safari的工作版本：http://jsfiddle.net/YWnzc/356/

Firefox的工作版本：http://jsfiddle.net/YWnzc/352/

最佳答案

是的，当浏览器是Firefox时，您的border-right width会更改，所以我认为您可以使用javascript中的函数来检测浏览器并根据它进行更改。

你可以这样...

Javascript：

var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+

if(isFirefox == true)
{
  $('.arrow-box.right').toggleClass('changed');
}

CSS：

.arrow-box.right.changed:after { top:2px; right:-7px; border-width:2px 2px 0 0; }

我为.arrow-box.right调用了更改的CSS，也可以根据需要为.arrow-box.left进行更改。
在Firefox和Chrome中检查此小提琴-> http://jsfiddle.net/YWnzc/360/

关于html - Firefox绝对位置旋转旋转问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32753023/