移动表格使 IE9 崩溃

因此，我对导致浏览器崩溃的 IE9 错误感到抓狂。我有一个表，正在使用媒体查询为小屏幕设备重新格式化。这是一些非常巧妙的编码，但是在 IE9 中，当我将浏览器窗口重新调整为大于媒体查询时，它会使 IE9 崩溃。似乎当你尝试从 CSS 中删除 CSS 时会这样做，但在添加 CSS 时可能不会这样做？

我发布了我的来源代码在这里 http://jsfiddle.net/Nj7zb/3/。尝试在 IE9 中重新缩放它。

我更新了我的来源并将其范围缩小到是什么导致了问题 http://jsfiddle.net/Nj7zb/22/.

HTML...

<table width="100%">
<thead>
<tr>
<th><a href="#">Detail 1</a></th>
<th><a href="#">Detail 2</a></th>
<th><a href="#">Detail 3</a></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Detail 1: ">Detail 1 Here</td>
<td data-label="Detail 2: ">Detail 2 Here</td>
<td data-label="Detail 3: ">Detail 3 Here</td>
</tr>
<tr>
<td data-label="Detail 1: ">Detail 1 Here</td>
<td data-label="Detail 2: ">Detail 2 Here</td>
<td data-label="Detail 3: ">Detail 3 Here</td>
</tr>
<tr>
<td data-label="Detail 1: ">Detail 1 Here</td>
<td data-label="Detail 2: ">Detail 2 Here</td>
<td data-label="Detail 3: ">Detail 3 Here</td>
</tr>
</tbody>
</table>

CSS...

@media only screen and (max-width: 800px) {
TABLE TBODY {float:left}
TABLE TBODY TR {float:left}
TABLE TD {float:left}
TABLE TD:Before {float:left;content:attr(data-label)}
}

好吧，一个修复似乎是向 TABLE 标记添加 float:left 。我真的不想让桌子浮动，所以我将继续寻找其他修复方法。