FF3.5 与 FF3.0 中 td 内的 span 的 css 渲染不同
我有一个网页，有一个表格，其中一个 td 内部是 span，使用较小的字体，向右浮动以将其放置到最右侧，以及负的顶部边距，因此它与 td 中较大的文本对齐。
在 Firefox 3.0 中，它工作得很好，但我刚刚更新到 Firefox 3.5，边距将文本移得太远。
我有另一个页面，其中有两个跨度条目，第二个条目同样具有较小的字体和负边距，并显示相同的问题。
在第三页上，有一个 h3 后跟一个跨度、较小的字体和负边距，它在 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;
}
提前致谢！ 相变材料
I have a web page that has a table and inside one of the td is span that uses a smaller font, float right to place it to the far right, and a negative margin-top, so it is aligned with larger text in the td.
With Firefox 3.0 it works fine, but I just updated to Firefox 3.5 and the margin is moving the text up too far.
I have another page, where there are two span entries, again the second with a smaller font and negative margin and shows the same issue.
On a third page, with a h3 followed by a span, a smaller font and negative margin, it works fine in Firefox 3.5.
I installed Safari today and it acts the same as Firefox 3.5. I don't have an issue with IE, as I have conditional CSS to handle the different IE versions (IE 7 uses a negative margin, but IE 8 uses a small positive margin).
Questions (finally :^):
Is anyone aware of changes in rendering for span and negative margins for Firefox 3.5?
How else could I write the HTML or CSS, to obtain the same result w/o browser specific hacks?
For the second case, I changed it from two spans, to an h3 and span, like the third case. The first case really is tabular data, so I'm using the table. Here's a fragment of the issue:
<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>
The pertinent (I hope) CSS is:
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;
}
Thanks in advance!
PCM
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
根据我的经验，Firefox 3.0 和 3.5 之间的渲染非常一致。 我认为这里的问题是标记中浮动 SPAN 的位置。 假设我正确理解您想要实现的目标，我会将浮动的 SPAN 放置在要在正常文档流中呈现的 TD 内容之前。
我创建了一个快速测试页面（使用 XHTML Transitional 文档类型）并对您的代码实施了以下更改。 我在 Firefox 3.0、Firefox 3.5 和 Safari 4.0（均在 Windows 上）中看到一致的渲染。
HTML：
CSS：
Rendering between Firefox 3.0 and 3.5 has been very consistent, in my experience. I think the issue here is the location of the floated SPAN in the markup. Assuming that I am correctly understanding what you are trying to achieve, I would place the floated SPAN before the content of the TD that is to be rendered in the normal document flow.
I created a quick test page (using XHTML Transitional doctype) and implemented the following changes to your code. I am seeing consistent rendering in Firefox 3.0, Firefox 3.5, and Safari 4.0 (all on Windows).
HTML:
CSS:
Firefox 3.5.2只是测试版的改进。
我毫不怀疑这可能是 Firefox 的问题，但如果 Safari 也这样做，那么很可能是你的代码造成的。
查看 csszengarden.com，这是设计网站的“更好”方式。
您还应该熟悉表格布局。 我从来没有听说过有人在 td 上设置负保证金，甚至在 float 上设置负保证金。 桌子的摆放是严格的，所以如果你把一张桌子的宽度设置为 200 像素，那么所有其他桌子的宽度就是多少（除非你将桌子嵌套在一起）。
我想说，除非确实需要，否则就删除桌子吧。
您能否发送该页面的链接，以便我可以了解到底出了什么问题（我在 OS X 上使用 Safari 4.x 开发人员）。
Firefox 3.5.2 is just an improvement to the beta.
I would not doubt that this could be something wrong with Firefox, but if Safari does it too it is likely your code.
Check out csszengarden.com, the "better" way to design a website.
Also you should be familiar with table layouts. I have never heard of someone putting a negative margin on a td, or even a float. Tables are laid our rigorously, so if you make one td 200px wide, that is how many all others will be (unless you nest tables inside one another).
I would say just drop the tables unless they are really needed.
And can you send a link to the page so I may see what exactly is wrong (I use Safari 4.x developer on OS X).
td 中的居中文本与 span 上的右浮动和负边距的组合在浏览器中的呈现方式有所不同。
向右浮动意味着将其向右移动，并在左侧显示内容。 您使文本向右浮动，然后使用负边距将其移动到之前文本的基线。
将文本前面的跨度移到左侧，它将正确对齐，没有负边距。
The combination of the centered text in the td and the right float and negative margin on the span are being rendered differently in the browsers.
Floating something right mean to move it to the right and have content after it displayed to the left. You are floating the text right and then using the negative margin to move it to the baseline of the text before it.
Move the span before the text to the left and it will line up correctly with out the negative margin.