html - CSS - このページで星を適切に配置する方法

Question

IE 9 と Opera ブラウザで星の位置合わせだけに問題があります。

次の HTML を使用しています。

<div class="fullwidth">
    <div class="floatleft star">&#9733;</div>
    <h3 class="icontxt">Co-Hosts</h3>
</div>

次の CSS:

.floatleft
{
    float: left;
}

.fullwidth
{
    width: 100%;
}

h3
{
    margin: 0;
    text-align: left;
    font-family: "GearedSlab-Regular", "Geared Slab Regular", "geared_slabregular";
    text-transform: uppercase;
    color: #212D3B;
    letter-spacing: .1em;
    font-size: 1.5em;
    line-height: 1.7em;
}

h3.icontxt
{
    padding-left: 1.5em;
}

.star
{
    font-size: 1.4em !important;
    color: #A92A23;
}

わかりましたので、Chrome、Firefox、および Safari は次のようにレンダリングします (すべてのブラウザーで必要な方法です)。

ただし、これを IE 9 や Opera で見ると、次のようになります。

星が高すぎます。テキスト「CO-HOSTS」と一致する必要があります。

ここで何か間違ったことをしていますか？IE、Chrome、Opera、Safari、および Firefox でこれをどのように普遍的に行うことができますか? これはとてもイライラします！