Firefox 4 和表格布局:已修复
我有一个问题,似乎是在 Firefox 3 和 4 之间引入的。本质上,它与 table-layout:fixed
有关。
我有一个可滚动表格,它使用两个 DIV,一个用于标题,一个用于正文(遗憾的是,这是对我有用的唯一选项)。
正文表看起来像这样(请注意,这都是用 JavaScript 生成的,它是 GWT 应用程序的一部分):(
<table style="table-layout: fixed;">
<colgroup>
<col width="61" />
<col width="57" />
</colgroup>
<tbody>
<!-- data -->
</tbody>
</table>
顺便说一下,该页面被声明为 HTML 4.01 Transitional)
似乎在 Firefox 3 中,列宽为受到尊重。然而,在 Firefox 4 中,有时它似乎会忽略列宽(很难准确确定,但通常当表格开始变得足够小,以至于 Firefox 难以调整大小时)。如果我检查 Firefox 中的列宽,它们通常与 HTML 中指定的宽度关系不大。
我只是想知道是否有人可以解释为什么会发生这种情况?
I have an issue which seems to have been introduced between Firefox 3 and 4. Essentially it's to do with table-layout: fixed
.
I have a scrollable table which uses two DIVs, one for the header and one for the body (sadly it's the only option which worked for me).
The body table looks something like this (note that this is all generated with JavaScript, it's part of a GWT application):
<table style="table-layout: fixed;">
<colgroup>
<col width="61" />
<col width="57" />
</colgroup>
<tbody>
<!-- data -->
</tbody>
</table>
(by the way, the page is declared as HTML 4.01 Transitional)
It seems that in Firefox 3, the column widths are being respected. However, in Firefox 4 it seems to ignore the column widths some of the time (difficult to pin down exactly but generally when the table starts getting small enough for it to be tricky for Firefox to resize). If I inspect the column widths in Firefox they generally have little relation to the widths as specified in the HTML.
I'm just wondering if anyone can shed any light on why this might be happening?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
首先要确保您的标记有效。您使用“/>” style SHORTTAG,在 HTML 4.01 中无效(这些闭包仅在 XHTML 中有效)。
我不知道意外的短标签是否会强制浏览器进入“怪异模式”(检查页面信息......有吗?)?怪癖模式对于故障排除来说是致命的。
如果您的 FireFox 安装了 Web Developer 扩展,我会检查表格及其内部的所有内容...可能是有东西在推动柱子的墙壁。
我无法进一步猜测这个问题......没有足够的数据。如果您从浏览器中保存完整的 HTML(然后小心地删除不必要或机密的部分),然后验证问题是否仍然出现在更简单的用例中,这将会很有帮助。如果是这样,请将该用例发布到网络上的某个位置,人们可以检查它。
除了简短的标签之外,您还没有透露自己做错了什么。但正如我所建议的,桌体内可能发生了一些事情......
The first thing is to make sure your markup validates. You use " />" style SHORTTAG, which is not valid in HTML 4.01 (those closures are only valid in XHTML).
I don't know if the unexpected shorttag will force the browser into "Quirks Mode" (check Page Info... has it?)? Quirks Mode is death to troubleshooting.
If your FireFox has the Web Developer extension installed, I would inspect the table and everything inside it... it could be something is pushing at the walls of the column.
I can't take further guesses at the problem.. not enough data. It would be helpful if you save the complete HTML from the browser (then carefully strip out unnecessary or confidental bits), and then verify the problem still occurs in the simpler use case. If so, post that use case on the web somewhere and people can inspect it.
Other than the short tags, you have not revealed you are doing anything wrong. But as I suggested, there's probably something going on inside the table body...
为什么不使用这个:
对于 col 标签,使用 CSS:
Why don't you use this:
And for the col-tag use the CSS:
您可能需要在 FF 4 中的数字后加上 px。测试一下:
You may need px after the number in FF 4. Test this: