html - 在表格内等分 100% 宽度的表格单元格

Question

这是我的第一个问题。我尝试搜索类似的疑问，但找不到任何可以解释为什么我的代码在 Internet Explorer (10+) 上无法正常工作的内容。

我制作了三个单元格显示的 div，这三个都具有 100% 的宽度:我想让所有三个在其父表显示的 div 中具有最大可能的宽度(主体宽度的 100%)。在 Firefox 和 Chrome 上，一切都按计划进行。但 IE 似乎忽略了这一点，并使所有三个 100% 宽。

代码如下:

HTML:

<div id="picture-holder">
    <div class="each-picture" id="picture-red">
    </div>
    <div class="each-picture" id="picture-blue">
    </div>
    <div class="each-picture"  id="picture-green">
    </div>
</div>

CSS:

.each-picture{
 display:table-cell;
 height:100%;
     width:100%;   
 overflow: hidden;
 vertical-align:middle;
 background-size:contain;
 background-repeat:no-repeat;
 background-position:center center;
 -moz-transition:width 2s;
 -webkit-transition: all .5s;
 transition: width 0.5s;
}
#picture-red{
background-color:red;
}
#picture-blue{
background-color:blue;
}
#picture-green{
background-color:green;
}

希望这个 fiddle 能让一切更清楚:http://jsfiddle.net/AU4f5/

非常感谢，对于任何拼写/语法错误，我们深表歉意。我真的希望这个问题符合指南。

Answer 1

您只需要从格式化为表格单元格的 div 元素中删除设置 width: 100% (class each-picture ).显然，您想将可用宽度平均分配给这些元素，并使用 table-layout: fixed 将它们的容器显示为表格就是这样做的。

您不需要设置内部 div 元素(“单元格”)的宽度。如果这样做，它们应该设置为 width: 33.3333%。将它们的宽度设置为 100% 要求浏览器为它们中的每一个分配表格总宽度的 100%。这当然是不可能的。不同的浏览器对此有不同的处理方式。