当应用于表格单元格时，如何使内联块一致地呈现？
我有一个简单的 HTML 表格，我想在每个现代浏览器（IE9、最新的 FF、Chrome、Safari）上一致地呈现它。如果我仅将宽度和“display: inline-block”应用于表格单元格，FireFox 4 和 Chrome 将允许表格单元格“换行”到第二行，就好像它们只是常规的内联块元素一样。然而，在 IE9 中，单元格被视为经典的表格单元格，并且不保持其宽度并被压缩成一行。
代码的完整示例在这里： http://jsbin.com/ujeber/6
是否有 CSS可以应用于 table、tr 或 td 元素以使 IE9、Chrome 和 FireFox 4 的行为方式彼此相同的属性吗？如果不是，那么哪些浏览器正确遵循了标准，或者在这种情况下标准是否不明确？
标记：
<table>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
<td>Test4</td>
</tr>
</table>
样式：
td {
width:300px;
display:inline-block;
}
table {
width: 650px;
}
我知道这不是使用表元素的典型/建议方式。我是在渲染引擎的预期行为的背景下询问的。我不是在寻找与选择语义上适当的标签相关的答案。
I have a simple HTML table that I want to render consistently across every modern browser (IE9, latest FF, Chrome, Safari). If I apply widths and "display: inline-block" to just the table cells, FireFox 4 and Chrome will allow the table cells to 'wrap' into a second row, as if they were just regular inline-block elements. In IE9, however, the cells are treated like classic table cells, and do not maintain their widths and are scrunched into one row.
Full example of the code is here: http://jsbin.com/ujeber/6
Is there a CSS property that can be applied to the table, tr, or td elements to get IE9, Chrome and FireFox 4 to behave in the same way as each other? If not, which of these browsers is following the standards correctly, or are the standards ambiguous in this case?
Markup:
<table>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
<td>Test4</td>
</tr>
</table>
Style:
td {
width:300px;
display:inline-block;
}
table {
width: 650px;
}
I know that this isn't the typical/suggested way to use the table element. I am asking in the context of the expected behavior of rendering engines. I'm not looking for answers related to choosing semantically appropriate tags.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我无法找到一种方法让 IE9 通过
display: inline-block给出您想要的结果。除非您的实际用例与简化的测试用例有所不同，否则您应该能够在
td上切换到float: left，这确实有效：http://jsbin.com/ujeber/7
float和inline-block通常可以互换。但是，它们都有不同的优点和缺点。对于float，您必须清除/包含它们。使用inline-block，您必须处理额外的间隙（通常通过删除 HTML 中的空格来修复），并且如果没有进一步的技巧，它在 IE6/7 中不起作用。I can't find a way to make IE9 give your desired result with
display: inline-block.Unless your actual use case is somehow different than your simplified test case, you should just be able to switch to
float: leftontd, which does work:http://jsbin.com/ujeber/7
floats andinline-blockare often interchangeable. But, they both have different strengths and weaknesses. Withfloats, you have to clear/contain them. Withinline-block, you have to deal with extra gaps (commonly fixed by removing whitespace in HTML), and it doesn't work in IE6/7 without further tricks.您似乎错过了使用
元素的要点，即以表格形式呈现数据。桌子不换行。如果您希望单元格换行，请使用带有
inline-block的常规块级标记。如果我们谈论对规范的遵守，那么 IE9 是“最不正确的”，因为演示文稿应该由 CSS 驱动。您如何让 IE 正确执行此操作？在
tr和table元素上设置display: block可能有效。You seem to be missing the point of using the
<table>element, which is to present data in a tabular form. Tables don't wrap.If you want your cells to wrap, use a regular block-level tag with
inline-block.If we're talking about adherence to the specs, IE9 is the 'least correct' given that the presentation is supposed to be driven by CSS. How would you get IE to do it properly? Setting
display: blockon yourtrandtableelements might work.不，没有任何 CSS 属性来包裹单元格。
据我所知
No, there isn't any CSS properties, to wrap the cells.
P.s. AFAIK