Question

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

使用Firefox 3.0，它运行良好，但我刚刚更新到Firefox 3.5，并且边距正在将文本移动太远。

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

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

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

问题（最后：^）：

是否有人知道Firefox 3.5的跨度和负边距渲染的变化？
我怎样才能编写HTML或CSS，以获得与浏览器特定黑客相同的结果？

对于第二种情况，我将其从两个跨度更改为h3和跨度，就像第三种情况一样。第一种情况确实是表格数据，所以我正在使用该表。以下是该问题的一个片段：

<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

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

我创建了一个快速测试页面（使用XHTML Transitional doctype）并对您的代码实施了以下更改。我在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 2

Firefox 3.5.2只是对beta版的改进。我不怀疑这可能是Firefox的错误，但如果Safari也这样做，那很可能是你的代码。

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

此外，您应该熟悉表格布局。我从来没有听说有人在td甚至是浮动上留下负余量。桌子是我们严格放置的，所以如果你制作一个200px宽的td，那就是其他的将是多少（除非你把桌子放在另一个里面）。

我会说除非确实需要，否则只需删除它们。

你可以发送一个链接到页面，这样我就可以看到究竟是什么问题（我在OS X上使用Safari 4.x开发人员）。

Answer 3

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

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

将文本向前移动到左侧，它将正确排列，但不会出现负边距。

<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;
}

不同的css渲染跨度内在td与FF3.5与FF3.0

3 个答案: