我有一个简单的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>
Run Code Online (Sandbox Code Playgroud)
样式:
td {
width:300px;
display:inline-block;
}
table {
width: 650px;
}
Run Code Online (Sandbox Code Playgroud)
我知道这不是使用table元素的典型/建议方式.我在渲染引擎的预期行为的上下文中询问.我不是在寻找与选择语义上合适的标签相关的答案.