我在 IE 9 和 Opera 浏览器中仅在星号对齐方面遇到困难。
我使用以下 HTML:
<div class="fullwidth">
<div class="floatleft star">★</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 上实现这一点?这真是令人沮丧!
最佳答案
.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;
}
关于html - CSS - 如何在此页面上正确对齐星号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16972862/