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百分比。