表不遵守 W3C 盒子模型,Ie8 忽略固定表宽度!
我在表格和列宽方面遇到了困难。
更新:我正在使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您使用的是默认的
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.