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

最新推荐文章于 2025-08-12 18:00:54 发布

转载最新推荐文章于 2025-08-12 18:00:54 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangjiajun/p/4011676.html

文章标签：

#php

探讨了在CSS中使用display:table-cell属性时，如何处理容器高度为100%的情况。通过实验展示了在不同浏览器环境下，如Chrome、IE8及Firefox等，元素高度的实际变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前看过张鑫旭的博客

页面重构“鑫三无准则” 之“无宽度”准则：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属性，结果如下：

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

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

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

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