zoukankan      html  css  js  c++  java
  • 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属性,结果如下:

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

     

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

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

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

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

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

  • 相关阅读:
    H5基础
    函数
    分支结构/循环结构
    图解 idea打jar包的步骤
    jmeter查看使用文档后总结
    Ride的使用
    Robot Framework
    jmeter+ant+jenkins
    ant
    Mysql选择合适的数据类型
  • 原文地址:https://www.cnblogs.com/wangjiajun/p/4011676.html
Copyright © 2011-2022 走看看