小编Nat*_*ell的帖子

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

我有一个简单的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元素的典型/建议方式.我在渲染引擎的预期行为的上下文中询问.我不是在寻找与选择语义上合适的标签相关的答案.

html css html5 google-chrome internet-explorer-9

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

google-chrome ×1

html ×1

html5 ×1

internet-explorer-9 ×1