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

Question

我有一个简单的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;  
  }

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

Answer 1

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

除非您的实际用例与您的简化测试用例有所不同,否则您应该只能切换到float: lefton td,这确实有效:

http://jsbin.com/ujeber/7

floats并且inline-block通常可以互换.但是,他们都有不同的优点和缺点.使用floats,您必须清除/包含它们.有了inline-block,你必须处理额外的空白(通常通过删除HTML中的空格来修复),如果没有进一步的技巧,它在IE6/7中不起作用.