Mobile Table crashes IE9

问题:

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?

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.

The 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>

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

回答1:

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.