html - 如何让 "display: block"在 IE 中的 上工作？

Question

有什么办法可以使 IE 显示表格单元格作为实际 block ？

鉴于这种风格:

table,tbody,tr,td,div {
  display: block;
  border: 1px solid #0f0;
  padding: 4px;
}

还有这个 html:

<table>
  <tbody>
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
      <td>R1C3</td>
    </tr>
  </tbody>
</table>

<div>
  <div>
    <div>
      <div>R1C1</div>
      <div>R1C2</div>
      <div>R1C3</div>
    </div>
  </div>
</div>

该表在 Firefox 和 Safari/Chrome 中呈现与嵌套 div 完全相同。但在 Internet Explorer (8) 中，属性 display: block 无效。该表呈现得就像我没有设置该属性一样。

我的主要问题是细胞不会破裂；它们都呈现在一条线上。 (tbody 和 tr 元素没有任何边框或填充。不过现在这对我来说不是问题。)

我在搜索时没有找到关于该问题的任何信息。兼容性图表 on quirksmode和其他地方指出 IE 从 v. 5.5 开始支持 display: block。任何关于表格显示问题的讨论似乎都是在做相反的事情时 - 为非表格元素提供任何 display: table-* 属性。

再一次，我能做些什么来让 IE 将表格单元格渲染为 block 吗？

(真正的表格实际上是一个表格，带有表格数据。我想保持这种状态，并以不显眼的方式重新设置它的样式。)

Answer 1

我申请了 float: left到东西。它有点管用。

Live Demo

最大的问题是width: 100%结合 padding使事情变得太广泛了。

所以:
Live Demo (without the problematic padding )

这看起来好多了，但我不确定如何轻松添加 padding随处可见。

---

这失败了 --> 悲惨地 <-- 在 IE7 中(它只是无法克服它是一个 <table> 的事实)，即使你不关心 IE7，它将需要针对您的用例进行调整(如果它完全可用)。

IE7: