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

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

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

Answer 1

您只需要从格式化为表格单元格的width: 100%元素中删除div设置（类each-picture）。显然，您希望将可用宽度均匀地划分为这些元素，并使其容器显示为table-layout: fixed的表格。

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

同样在表格中划分100％宽度的表格单元格

1 个答案: