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 中查看它，它看起来像这样：

Star 太高，需要与文字一致：“CO-HOSTS”

我在这里做错了吗？如何在 IE、Chrome、Opera、Safari 和 Firefox 上通用？这太令人沮丧了！

Answer 1

这个怎么样：

.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
{
    line-height: 1.7em;
    font-size: 1.4em !important;
    color: #A92A23;
}