Question

我网站的h1，h2和h3（仅限本地服务器atm）在FF中比在Chrome和Safari中更大胆。对齐也稍微偏离。为什么会发生这种情况？如何抵消呢？

注意：这对我在Ubuntu的合作伙伴没有发生（我在Mac上，差异很大）。

这影响了所有事物的排列，因为我使用萤火虫来使所有事情都正确，这显然是有问题的！

我将为一个表现不佳的元素复制继承的CSS。我不确定是否需要它，但我认为它不会受到伤害：

#show_page_info h1 {
    color: #FFF7E7;
    display: block;
    font: bold 23pt Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 17px 5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    width: 445px;
}
style3.css (line 342)
Inherited fromdiv#show_page_info
#show_page_info {
    text-align: left;
}
style3.css (line 326)
Inherited fromdiv#show_page_item
.show_item, #show_page_item {
    list-style: none outside none;
}
style3.css (line 295)
Inherited frombody
body {
    color: #333333;
    font: 13pt/1.5 Helvetica,Arial,sans-serif;
}

更大胆的文字是一回事，但是对齐是一种巨大的痛苦。如果我以FF为中心，它在Chrome中关闭，如果我在Chrome中心，它在FF等关闭。

提前谢谢!!

编辑： html（这仅适用于上述CSS，适用于所有h1，h2，h3 ......

<div id="show_page_item">
    <div id="show_page_info">
        <h1>{{show.time|date:"l, N jS"}}
        <span id="show_detail_cost">
        {% if show.cost == 0 %}
            Free!
        {% else %}
            ${{ show.cost|floatformat:"-2" }}
        {% endif %}
        </span>
        </h1>
    </div>
</div>

Answer 1

根据字体，每个浏览器以不同的方式呈现它们。试试这个可以更好地控制moz中的权重：

        @-moz-document url-prefix() {
    * { font-weight: 100; }
    h1, h2, h3, h4, h5, h6 { font-weight: 400; 
    }

Answer 2

在Chrome 14.0.833之前（参见this question），文本阴影在文本上的呈现比Firefox更紧密。我认为这是Firefox中显然“更大胆”文本的原因。 Commandrea的答案也可能是恰当的。至于对齐问题;我不确定 - 看看我对你问题的评论。

与Chrome和Safari相比，为什么我的h1在FF中看起来有所不同？

2 个答案: