css六角形; Chrome與Firefox的不同大小：之前/之後

Question

我試圖製作一個六角形，但由於某種原因它在Chrome和Firefox中大小不同。

退房小提琴： https://jsfiddle.net/aa7o6m2L/

#packages .hexagon { 
    margin:-42px auto; 
    width:65px; 
    height:65px; 
    position: relative; 
    line-height: 1.428; 
} 

#packages .hexagon:after { 
    font-family:arial; 
    position: absolute; 
    z-index: 1; 
    top: -36px; 
    left: -6px; 
    content: "⬢"; 
    color: rgba(2, 135, 160, 1); 
    font-size: 86px; 
    line-height: 1.428; 
} 

#packages .hexagon:before { 
    font-family:arial; 
    position: absolute; 
    z-index: 0; 
    top: -37px; 
    left: -6px; 
    content: "⬢"; 
    color: #fff; 
    transform: scale(1.09, 1.09); 
    font-size: 86px; 
    line-height: 1.428; 
} 

#packages .hexagon span { 
    z-index: 200; 
    margin: 24px auto 0; 
    font-size: 1.3em; 
    color: #fff; 
} 

我設置字體家庭，字體大小，行高。

任何其他想法或建議將是偉大的。

感謝， 布蘭登

Answer 1

的問題是，unicode hexagon是在Chrome & Firefox的渲染不同。

谷歌

火狐

爲什麼？我不知道。