2017-09-13 3 views
2

Je suis en train de faire un hexagone, mais pour une raison quelconque, il est de tailles différentes dans Chrome et Firefox.css hexagone; Chrome vs Firefox taille différente: avant/après

Vérifiez le violon: 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; 
} 

J'ai mis en font-family, font-size, hauteur de la ligne.

Toutes les autres idées ou suggestions seraient géniales.

Merci, Brandon

+0

Cela ne répond pas à votre question, mais l'avez-vous vu? http://csshexagon.com/ –

+0

Im étonné il y a une page entière consacrée à ceci ... –

+0

oui et il fait un hexagone moche: https: //jsfiddle.net/aa7o6m2L/5/ – cybromancy

Répondre

1

Le problème est que le unicode hexagon est rendu différemment dans Chrome & Firefox.

Google

google

Firefox

firefox

Pourquoi? Je ne sais pas.