XF 1.2 Change Font Size Across Browsers

[DRE]

I decided to use a symbol for the number 8 on my site's logo using a dingbat unicode. In Google Chrome, which is the main browser I use these days, the 8 looks fine but in browsers like IE and Firefox the 8 is too large. How can I resize the 8 for Firefox and IE but keep it the same in Chrome? In comparison, the other letters use pretty much the same font css (different color) but the font size is different. It's 40px for the other letters.

This is my template code for the number 8.

Template: logo_block

<span class="xf1_logo">❽</span>

EXTRA.css

.xf1_logo{
    float: left;
    height: 40px;
    line-height: 38px;
    text-decoration: none;
    text-shadow: #0040FF 0px 0px 2px;
    font-family: 'Conv_cgothic';
    font-weight: normal;
    font-style: normal;
    font-size: 48px;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}