chrome浏览器下dispaly:table-cell下的新表现or新bug

之前看过张鑫旭的博客 

页面重构“鑫三无准则” 之“无宽度”准则：http://www.zhangxinxu.com/wordpress/?p=1152

CSS流体(自适应)布局下宽度分离原则：http://www.zhangxinxu.com/wordpress/?p=1463

我所知道的几种display:table-cell的应用：http://www.zhangxinxu.com/wordpress/?p=1187

在测试table-cell下无宽度准则时，想试试固定高度的无高度准则，发现table-cell下容器的高度会发生奇妙的变化。

容器固定高度和宽度各300px，不设置display属性，结果如下：

<div style="width:300px; height:300px; background-color:#06F;">
    <div style="height:100%; border:#903 solid 10px; padding:10px;">123456</div>
  </div>

在给子元素设定高度100%，border和padding各10px后，子元素被撑大了，其实际高度是300+20+20=340px。

给子元素添加display:table-cell属性，其余属性不变，结果如下：

<div style="width:300px; height:300px; background-color:#06F;display:table-cell;">
    <div style="height:100%; border:#903 solid 10px; padding:10px;">123456</div>
  </div>

 

可以看到设置高度为100%后，改变边框宽度和padding值，元素会自动缩小或加大实际内容的高度，确保实际高度+border+padding=设置高度。

PS:仅针对高度有效，测试给子元素添加width:100%属性后，宽度会被撑大，不过依照张鑫旭的宽度分离原则，宽度是设置在父级元素上，所以子元素宽度自适应就行了。

以上测试浏览器：chrome版本 36.0.1985.125

最近在IE8和火狐13和火狐33测试高度被撑大了，是340px，估计是chrome的一个bug

本文地址:http://www.cnblogs.com/wangjiajun/p/4011676.html