Internet Explorer 8的css故障排除

我正在制作一个不幸需要与IE 8兼容的网站。我已经成功实施了一些更改，据我所知，至少HTML5不起作用。Internet Explorer 8的css故障排除

但我在找到正确的事情在这种情况下很努力。

这个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; 
}

来源

2014-03-31 KjetilNordin

你可以使用一些js库在IE8中部分启用html5。看看这里的更多细节http://stackoverflow.com/questions/12996413/html5-for-ie8-or-less – user2167382

其实，像听上去那么疯狂，IE8在技术上是正确的。 Chrome在这里是非标准的，有利于保持预期的行为。

table-layout:fixed意味着修复表格布局而不考虑内容，包括对所述内容的更改。这可以更快地渲染表格。

不幸的是，这意味着没有简单的方法来确保等宽列的数量，而列的数量可以通过切换来变化。

您需要先删除table-layout:fixed，然后让JavaScript计算加载时的相应百分比width，以及每当列数发生变化时。

来源

2014-03-31 14:05:15

这太糟糕了，但我会尝试一些小调整，然后放弃。在我实际的项目代码中，我所描述的表实际上是在anoter表的td中。我希望能保持table-layout：固定在父表上，但将其从子表中移除，并查看会发生什么。谢谢你的意见，虽然，这是最教育:)。在接受它作为答案之前，我会稍微尝试一下，因为我总是这样做:) – KjetilNordin

Internet Explorer 8的css故障排除

回答

相关问题