1

这是我在这里的第一个问题。我尝试寻找类似的疑问，但在 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;
}

希望这个小提琴能让一切更清楚：http: //jsfiddle.net/AU4f5/

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

4

1 回答 1

3

您只需从格式化为表格单元格（类）width: 100%的div元素中删除设置。each-picture显然，您希望将可用宽度均匀地分配给这些元素，并让它们的容器显示为表格，table-layout: fixed就可以做到这一点。

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

于 2013-10-16T19:50:08.330 回答