奇Firefox顯示（CSS變換）

Question

這個新的CSS3的東西是那麼花哨，但渲染似乎是瀏覽器之間真的不一致（我甚至不談論陰影形狀本身）

在這裏，我做了例如，看起來在Chrome神勇，但在Firefox中鋸齒狀邊界： http://jsfiddle.net/eBJxV/4/

請注意，我添加了一個箱陰影，它看起來像背景顏色彪炳。 對於Chrome，translate3D有這種解決方法，我還可以爲Firefox做些什麼嗎？

這裏的代碼，你也可以看到的jsfiddle

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

Answer 1

用於本老火狐-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); 

} 

Answer 2

您可以用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'); 

這裏是的jsfiddle：

http://jsfiddle.net/eBJxV/14/

請注意，此信息（及以上）的上一篇博客文章中，我寫了前段時間convered關於這個問題：

http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

希望這有助於。

Answer 3

解決了它，通過添加1px的邊框和相同的背景顏色。 然後以不同的方式應用框大小，以避免邊框是大小的一部分。 然後由於填充，不得不改變寬度。

http://jsfiddle.net/eBJxV/19/

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; 
 
    border-style: solid; 
 
    border-color: #E8501F; 
 
    border-width:1px; 
 
    transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0); 
 
    transform: rotate(-4deg) translate3d(0, 0, 0); 
 
    
 
    box-sizing: border-box; 
 
    outline: 1px solid transparent; 
 
    
 
    -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:140px; 
 
    font-weight:bold; 
 
    font-family:Verdana; 
 
    color:#ffffff; 
 
} 
 

 
body{ 
 
    background-color:#FFF; 
 
}

<h1>JSFiddle</h1> 
 
    <h1>Shiddle</h1>