Internet Explorer 8的CSS故障排除

Question

不幸的是，我正在制作一个与IE 8兼容的网站。我了解到至少HTML5无法正常工作，因此我已经成功实现了一些更改。

但是在这种情况下，我正在努力寻找正确的方法。

此JSFiddle很好地简化了我的问题代码。所需的输出可在我的Chrome版本中使用。 http://jsfiddle.net/kjetilnordin/g6FGv/

表中只有一行，并且有三个单元格。这三个单元在它们之间平均划分了空间，并且没有考虑其内容大小。现在，我有了切换框，可以使单元格不可见或再次变为可见。我希望剩余的单元格占用其父级的所有空间，分为1、2或3个可见单元格。

在IE 8中，单元格保持其1/3大小，仅当左侧的单元格变为不可见时才向左移动。

我希望其中一个CSS属性不受支持，但是我已经检查了所有属性，它们应该可以工作。

那么，这里没有玩的是什么？一个解决方案将是不错的选择，但是朝着正确的方向微调也是一样。

代码：

<table>
    <tr>
        <td class="foo">
            foo
        </td>
        <td class="bar">
            bar
        </td>
        <td class="foobar">
            foobar
        </td>
    </tr>
</table>

<input type="checkbox" class="togglebox" value="foo">toggle off foo</input></br>
<input type="checkbox" class="togglebox" value="bar">toggle off bar</input></br>
<input type="checkbox" class="togglebox" value="foobar">toggle off foobar</input></br>

Javascript：

$('input:checkbox').live('change', function(){
    if($(this).is(':checked')){
        $("."+this.value).toggle(false);
    } else {
         $("."+this.value).toggle(true);
    }
});

css：

table{
    border: 1px solid black;
    border-collapse: collapse;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    table-layout: fixed;
}

td{
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

Answer 1

实际上，听起来很疯狂，IE8从技​​术上来说是正确的。 Chrome在这里是非标准的，旨在保持预期的性能。

table-layout:fixed表示无论内容如何（包括对所述内容的更改），都固定表格布局。这样可以更快地呈现表。

不幸的是，这意味着没有简单的方法来确保等宽列，同时通过切换来改变列数。

[您将需要删除table-layout:fixed并让JavaScript在加载时以及每当列数更改时计算适当的width百分比。