奇数Firefox渲染（css转换）

这个新的CSS3的东西太花哨了，但是浏览器之间的渲染似乎真的不一致（我甚至没有谈论阴影形状本身）

在这里，我举了一个在Chrome中看起来非常棒的例子，但在Firefox中有一个锯齿状的边框：

请注意，我已经添加了一个框阴影，它看起来像是背景颜色的光芒透过。 对于Chrome，translate3D有一个解决方案，我能为Firefox做些什么吗

下面是您也可以在JSFIDLE中看到的代码

h1 {
    background-color: #E8501F;
    border-radius: 13px 0 0 13px;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
    display: block;
    font-size: 18px;
    height: 30px;
    letter-spacing: 0.03em;
    padding: 0 20px;
    text-transform: uppercase;

    transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0);
    transform: rotate(-4deg) translate3d( 0, 0, 0);


    -webkit-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
    -webkit-transform: rotate(-4deg) translate3d( 0, 0, 0);

    margin:10px 0;
    width:100px;
    font-weight:bold;
    font-family:Verdana;
    color:#ffffff;
}

body{
background-color:#FFF;
}

用于旧的Firefox

-moz

像这样

h1 {

    -moz-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
    -moz-transform: rotate(-4deg) translate3d( 0, 0, 0);

}

---

您可以使用CSS过滤器修复它：

filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');

filter:url（'data:image/svg+xml；utf8，#gaussian_blur'）；

以下是JSFIDLE：

请注意，这些信息（以及更多信息）是在我不久前写的一篇关于这个主题的博文中传递的：

---

希望这有帮助。

解决了这个问题，添加了一个带有1px的边框和相同的背景色。 然后应用不同的长方体大小，使边框成为大小的一部分。 然后由于填充，不得不改变宽度

h1{
背景色：#E8501F；
边界半径：13px 0 13px；
盒影：2px3px3pxRGBA（0,0,0,0.3）；
显示：块；
字号：18px；
高度：30px；
字母间距：0.03em；
填充：0 20px；
文本转换：大写；
边框样式：实心；
边框颜色：#E8501F；
边框宽度：1px；
变换：矩阵（0.997564，-0.0697565,0.0697565,0.997564,0,0）；
变换：旋转（-4deg）translate3d（0,0,0）；
框大小：边框框；
外形：1px实心透明；
-webkit变换：矩阵（0.997564，-0.0697565,0.0697565,0.997564,0,0）translate3d（0,0,0）；
-webkit变换：旋转（-4deg）translate3d（0,0,0）；
利润率：10px0；
宽度：140px；
字体大小：粗体；
字体系列：Verdana；
颜色：#ffffff；
}
身体{
背景色：#FFF；
}

JSFiddle
Shiddle

用于旧Firefox的-moz转换检查以下示例：好的，我还将使用供应商前缀，但这并不能解决问题。现在不确定它是否看起来完全相同，似乎边框1px确实移动了标题。。哦，好吧，或者我的眼睛在玩把戏：D。这似乎和你原来的问题一样，字体上有扭曲、锯齿状的边框