Html 在Chrome和Firefox中旋转div的渲染方式不同

我在Firefox和Chrome的渲染方面存在以下差异

*{
框大小：边框框；
}
.箭头容器{
填充：35px 15px；
宽度：60px；
高度：100px；
背景色：rgba（0,0,0,0.3）；
}
.阿罗{
位置：相对位置；
宽度：30px；
高度：30px；
}
.阿罗：以前，
.arrow：：之后{
内容：''；
显示：块；
位置：绝对位置；
右：2px；
宽度：30px；
高度：3倍；
背景色：#ffffff；
长方体阴影：0 1px 0#ffffff，
0 1px 0#ffffff，
0 1px 0#ffffff，
0 1px 0#ffffff；
}
.阿罗：以前{
最高：50%；
变换原点：100%0；
变换：旋转（45度）；
}
.arrow：：之后{
底部：50%；
变换原点：100%100%；
变换：旋转（-45度）；
}

---

使用

高度的偶数值（因为Chrome计算像素的分数，Firefox不计算）和更简单的
框阴影，结果会更准确


*{
框大小：边框框；
}
.箭头容器{
填充：35px 15px；
宽度：60px；
高度：100px；
背景色：rgba（0,0,0,0.3）；
}
.阿罗{
位置：相对位置；
宽度：30px；
高度：30px；
}
.阿罗：以前，
.arrow：：之后{
内容：''；
显示：块；
位置：绝对位置；
右：2px；
宽度：30px；
高度：4px；
背景色：#ffffff；
盒影：0 1px 0#ffffff；
}
.阿罗：以前{
最高：50%；
变换原点：100%0；
变换：旋转（45度）；
}
.arrow：：之后{
底部：50%；
变换原点：100%100%；
变换：旋转（-45度）；
}
啊，太好了。谢谢