IE9，表格和display: block

Question

对于我网站的低宽度移动版本，我会将某些表格、行、单元格和表头的 display 属性切换为 block，以使它们垂直堆叠。我使用这种技术来允许宽表格继续显示其所有内容，而不会溢出其容器。在所有现代5个浏览器中都可以完美运行，但在IE9中无法运行。有没有办法在IE9中实现这个效果？

这是一个JFiddle链接：http://jsfiddle.net/cfCzD/4/ 以下是屏幕截图： IE11（目标）：

IE9（结果不佳）：

- Grumblesaurus

---

你在IE浏览器中查看了你的fiddle吗（因为它有正确的DOCTYPE）？ - mplungjan

我试过了。我在“ IETester”中尝试它，但结果不正确。屏幕截图来自jfiddle。 - Grumblesaurus

Answer 1

http://jsfiddle.net/xnKTH/

td {
    width: 100%\9;
    float: left\9;
}

在TD上添加宽度并浮动。

- Christina

---

这真的很有帮助。我也遇到了同样的问题。谢谢你。 - jmartsch

完全相同的问题，完美的复制粘贴解决方案。谢谢！ - nirazul

Answer 2

以下是一些有用的链接（如果您还没有查看它们）：

1. CSS Tricks: 响应式数据表格
   
2. CSS Tricks：表格元素完全指南

- Josh Beam

Answer 3

也许你应该尝试使用div标签来替代表格。

e.g:

<div style="display:table">
  <div style="display: table-row">
    <div style="display: table-cell">
      content content
    </div>
    <div style="display: table-cell">
      content content content
    </div>
  </div>
</div>

这将在IE8及以上版本中完美运行。

- Slawa Eremin

---

这将是一个很大的头疼来管理。内联样式必须使用!important指令进行覆盖。不过还是谢谢你的想法。 - Grumblesaurus

我只使用内联样式作为示例，最好为每个样式编写类。 - Slawa Eremin

我明白了。但是，为了支持旧版本而避免使用正确的标签对我来说感觉非常“不对”。我点赞了这个答案，但不会接受它。 - Grumblesaurus