css-Sechseck; Chrome vs Firefox unterschiedliche Größe: vor/nach

Question

Ich versuche, ein Sechseck zu machen, aber aus irgendeinem Grund ist es unterschiedliche Größen in Chrome und Firefox.

Schauen Sie sich die Geige: 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; 
} 

I font-family festgelegt haben, font-size, line-height.

Alle anderen Ideen oder Vorschläge wären großartig.

Danke, Brandon

Answer 1

Das Problem ist, dass die unicode hexagon ist anders in Chrome & Firefox-Rendering.

Google

Firefox

Warum? Ich weiß es nicht.