表不遵守 W3C 盒子模型,Ie8 忽略固定表宽度!

发布于 2024-08-28 16:50:49 字数 457 浏览 5 评论 0原文

我在表格和列宽方面遇到了困难。

更新:我正在使用 XHTML Strict 1.0。

页面为:http://www.pro-turk.net/try

第一个问题我有一个列,其固定宽度为 100px 和 4px 填充,但它根据值不服从我的填充。即使填充为 0 或 4,列宽(根据 W3C 盒子模型,两个边框之间的距离)也是 156 px。只有文本的位置发生变化。

根据 W3C 盒子模型(可在 www.pro-turk.net/box_model.png 获取),边框和填充不包含在 WIDTH 属性中,那么为什么它渲染错误呢?

第二个问题是,当你用 IE8 查看我给出的页面时,第二行中的第一个单元格具有 150px 固定宽度,但无论我说什么,ie 显示它大约是总表格宽度的 50%。

I'm having hard time with tables and column widths.

Update: I'm using XHTML Strict 1.0.

The page is: http://www.pro-turk.net/try

The first problem I have is, I have a column with a fixed width of 100px and 4px padding, but it disobeys my padding depending on the value. The column width (as the distance between two borders according to W3C Box Model) is 156 px even if padding is 0 or 4. Only the position of the text changes.

According to W3C Box Model ( available at www.pro-turk.net/box_model.png ), borders and paddings aren't included in WIDTH attribute, so why does it render wrongly ?

The second problem is, when you look the page I gave with IE8, the first cell in the second row has 150px fixed width, but ie shows it about 50% of the total table width regardless of what i say.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

帥小哥 2024-09-04 16:50:55

您使用的是默认的 auto表格布局模式。这使得浏览器可以相当任意地决定分配给每列多少空间,通常取决于单元格中的实际内容量。在这种模式下,width 只是建议性的。

如果您希望浏览器认真对待列宽,您应该在 元素上设置 table-layout:fixed,并且包含 元素具有显式宽度,或者在第一行中的单元格上设置宽度。 (其他列将平均共享剩余宽度。)固定表格布局还允许浏览器更快地呈现。

对于您的页面,使用 CSS 定位可能会更好。当然,对于似乎仅存在于图像左浮动的内部表。应避免嵌套表。

You're using the default auto table-layout mode. That lets the browser decide fairly arbitrarily how much space to assign to each column, usually depending on the amount of actual content in the cells. In this mode, width is little more than advisory.

If you want the browser to take your column widths seriously you should set table-layout: fixed on the <table> element, and either include <col/> elements with explicit widths, or set widths on the cells in the first row, for the columns you want to be fixed-width. (The other columns will share the remain width equally.) fixed table layout also allows the browser to render faster.

For your page you might be better off with CSS positioning. Certainly for the internal table that seems to exist only to float-left the image. Nested tables are to be avoided.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文