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

我试图制作一个六角形，但由于某种原因它在Chrome和Firefox中大小不同。css六角形; Chrome与Firefox的不同大小：之前/之后

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

我设置字体家庭，字体大小，行高。

任何其他想法或建议将是伟大的。

感谢，布兰登

来源

2017-09-13 cybromancy

这并不回答你的问题，但你见过？ http://csshexagon.com/ –

我惊讶有一整个页面专门为此... –

是的，它使一个丑陋的六角形：https：//jsfiddle.net/aa7o6m2L/5/ – cybromancy

的问题是，unicode hexagon是在Chrome & Firefox的渲染不同。

谷歌

火狐

为什么？我不知道。

来源

2017-09-13 23:46:42

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

回答

相关问题