当应用于表格单元格时，如何使内联块一致地呈现？

我有一个简单的 HTML 表格，我想在每个现代浏览器（IE9、最新的 FF、Chrome、Safari）上一致地呈现它。如果我仅将宽度和“display: inline-block”应用于表格单元格，FireFox 4 和 Chrome 将允许表格单元格“换行”到第二行，就好像它们只是常规的内联块元素一样。然而，在 IE9 中，单元格被视为经典的表格单元格，并且不保持其宽度并被压缩成一行。

代码的完整示例在这里：http://jsbin.com/ujeber/6 http://jsbin.com/ujeber/6

是否有一个 CSS 属性可以应用于 table、tr 或 td 元素以使 IE9、Chrome 和 FireFox 4 的行为方式彼此相同？如果不是，那么哪些浏览器正确遵循了标准，或者在这种情况下标准是否不明确？

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;  
  }

我知道这不是使用 table 元素的典型/建议方式。我是在渲染引擎的预期行为的背景下询问的。我不是在寻找与选择语义上适当的标签相关的答案。

我找不到让 IE9 给出你想要的结果的方法display: inline-block.

除非您的实际用例与简化的测试用例有某种不同，否则您应该能够切换到float: left on td，这确实有效：

http://jsbin.com/ujeber/7 http://jsbin.com/ujeber/7

floats and inline-block经常可以互换。但是，它们都有不同的优点和缺点。和floats，你必须清除/遏制它们。和inline-block，你必须处理额外的间隙（通常通过删除 HTML 中的空格来修复），并且如果没有进一步的技巧，它在 IE6/7 中不起作用。