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