移动表崩溃IE9 [英] Mobile Table crashes IE9

问题描述

所以我把我的头发超过IE9的错误，导致浏览器崩溃。我有一个表，我正在重新格式化小屏幕设备使用媒体查询。这是一些很漂亮的编码，但在IE9当我重新调整浏览器窗口大于媒体查询它崩溃IE9。似乎这样做，当你尝试把CSS从它，但不是当添加它可能吗？

So I'm pulling my hair out over an IE9 bug that causes the browser to crash. I have a table that I am reformatting for small screen devices using media queries. It's some pretty slick coding, but in IE9 when I rescale the browser window larger than the media query it crashes IE9. Seems to do it when you try taking CSS away from it but not when adding it maybe?

我在这里发布了我的来源。尝试在IE9中重新缩放它。

I posted my source code here. Try rescaling it in IE9.

我更新了源文件并将其缩小为导致问题的原因。

I updated my source and narrowed it down to the what is causing the problem.

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)}
}

推荐答案

好的，一个修复似乎添加了float：left到TABLE标签。我真的不想浮动表，所以我会继续寻找其他修复。

Ok, well one fix seems to be adding float:left to the TABLE tag. I don't really want to float the table so I'm going to keep looking for other fixes.

这篇关于移动表崩溃IE9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！