html5 - css hexagon; Chrome vs Firefox different size :before/after -
i'm trying make hexagon, reason different sizes in chrome , firefox.
check out fiddle: 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've set font-family, font-size, line-height.
any other ideas or suggestions great.
thanks, brandon
the problem unicode hexagon rendering differently in chrome & firefox.
firefox
why? don't know.
Comments
Post a Comment