FF3.5 与 FF3.0 的 td 内 span 的不同 css 渲染

Question

我有一个网页，其中有一个表格，其中一个 td 是 span，它使用较小的字体，向右浮动以将其放置在最右侧，以及负边距顶部，因此它与较大的文本对齐在 td 中。

使用 Firefox 3.0 可以正常工作，但我刚刚更新到 Firefox 3.5，并且边距将文本向上移动了太多。

我有另一个页面，其中有两个跨度条目，第二个具有较小的字体和负边距并显示相同的问题。

在第三页上，h3 后跟 span，较小的字体和负边距，它在 Firefox 3.5 中运行良好。

我今天安装了 Safari，它的行为与 Firefox 3.5 相同。我对 IE 没有意见，因为我有条件 CSS 来处理不同的 IE 版本（IE 7 使用负边距，但 IE 8 使用小的正边距）。

问题（终于：^）：

• 有人知道 Firefox 3.5 的跨度和负边距渲染的变化吗？

• 我还能如何编写 HTML 或 CSS，以获得相同的结果而无需浏览器特定的 hack？

对于第二种情况，我将其从两个 span 更改为 h3 和 span，就像第三种情况一样。第一种情况确实是表格数据，所以我使用的是表格。这是问题的一部分：

<div id="content">
<table id="events2" cellspacing="0">
<tr class="month">
<td>August 2009<span class="gotop">(go to top)</span>
</td></tr>
<tr>
<td>
A table row</td>
</tr>
</table>

相关的（我希望）CSS 是：

div#content {
    margin: 0;
    padding: 0
    width:100%;
    background: white;
    color: black;
    font-size: 80%;
}
#events2 td {
    padding: 4px;
    border-bottom: 2px solid #BBB;
}
#events2 tr.month td {
    padding: 0.125em 0;
    font-size: 1.2em;
    text-align: center;
    border-top: 3px solid black;
    border-bottom: 2px solid #BBB;
}
#events2 tr.month td .gotop {
    float: right;
    font-size: 0.6em;
    margin-top: -1.4em;
    padding-bottom: 0.3em;
}

提前致谢！ PCM

Answer 1

td 中的居中文本与 span 上的右浮动和负边距的组合在浏览器中呈现不同。

将某些内容向右浮动意味着将其移动到右侧并在左侧显示之后的内容。您将文本向右浮动，然后使用负边距将其移动到之前文本的基线。

将文本前的跨度向左移动，它将正确对齐，没有负边距。

<td><span class="gotop">(go to top)</span>August 2009</td>

#events2 tr.month td .gotop {
    float: right;
    font-size: 0.6em;
    padding-bottom: 0.3em;
}

Answer 2

根据我的经验，Firefox 3.0 和 3.5 之间的渲染非常一致。我认为这里的问题是标记中浮动 SPAN 的位置。假设我正确理解了您要实现的目标，我会将浮动 SPAN 放在要在正常文档流中呈现的 TD 内容之前。

我创建了一个快速测试页面（使用 XHTML 过渡文档类型）并对您的代码进行了以下更改。我在 Firefox 3.0、Firefox 3.5 和 Safari 4.0（都在 Windows 上）中看到了一致的呈现。

HTML：

<div id="content">
    <table id="events2" cellspacing="0">
        <tr class="month">
            <td><span class="gotop">(go to top)</span>August 2009</td>
        </tr>
        <tr>
            <td>A table row</td>
        </tr>
    </table>
</div>

CSS：

#events2 tr.month td .gotop {
    float: right;
    font-size: 0.6em;
    /*margin-top: -1.4em;*/ /* REMOVED */
    /*padding-bottom: 0.3em;*/ /* REMOVED */
    margin-left: 5px; /* ADD */
}

Answer 3

Firefox 3.5.2 只是对测试版的改进。 我不怀疑这可能是 Firefox 的问题，但如果 Safari 也这样做，那很可能是您的代码。

查看 csszengarden.com，这是设计网站的“更好”方式。

您还应该熟悉表格布局。我从未听说有人在 td 甚至浮动上设置负边距。表格是我们严格放置的，因此如果您将一个 td 设为 200 像素宽，那么其他所有表格将是多少（除非您将表格嵌套在另一个中）。

除非真的需要，否则我会说直接删除表格。

您能否发送一个指向该页面的链接，以便我看看到底出了什么问题（我在 OS X 上使用 Safari 4.x 开发人员）。