认真学习CSS3-问题收集-101号-莫名其妙的row行高

Posted 2021-09-09 正在战斗中

容器尺寸和被包装物的关系

其他人都有事情，有些事情只好自己上阵，自己做，最踏实！

做了两个基本一样的页面，都是采用bootsrap+jquey+js的技术，业务内容就是简单的查询，加上一些简单的效果，没有啥特别的内容。

由于历史的缘故，css有点乱，因为这两个页面可以看作是重写的页面。

问题来了！

页面a的table中行高比较正常，大概是40px左右，而b的行高是50px左右。

用浏览器开发工具检查了半天，代码也看了半天，看不出什么差异。

又试验了调试，手动在调试器上修改样式:

table tr{

  height:40px !important;

}

依然无效。

忽然想起哪里的文章，可能是以下的情形之一：

1.全局样式，或者是父亲容器的样式导致容器本身尺寸不可修改

2.容器/盒子内部的元素导致容器/盒子不可收缩

第1种，可能性比较小，因为已经!important,且没有什么特别的js会动态调整他们的高度。

又细细看了每个列，终于发现问题所在：

b的一个列有formatter，formatter返回的内容大概如下：

return "<label>"+value+"</label>";

而这个label并不是老老实实的使用默认的样式来展示自己，居然多了个margin-bottom属性，值自然不是0px。

工具并没有说明这个附加的样式是如何来的（毕竟工具也不是万能的），于是只好覆盖：

td label{
 margin-bottom:0px !important;
}

先了了再说，后面有空，再看看这个是怎么导致的。

那么在什么情况下，外容器是无法调整自身大小的呢？下面我做了几个实验。主要是根据display,position几个属性来调整（明日继续)