已有的手段:
- CSS inspector 的 computed 部分, 可以看是哪一行 CSS 起作用的
- 还可以逐个看子元素的高度
还是有一些情况, 高度是 auto 的, 子元素高度也逐个看过了, 还是有疑惑,
比如说, 有个奇怪的 1px 的差值, 不知道是从哪儿算出来的... 这种情况下怎样调试呢?
为了尽量不触发tl;dr事件,我从CSS中的四个值来讲起吧1(咦
- 指定值Specified values:在样式表中指定的值
- 将确定一个属性使用的是声明值、继承值还是初始值
- 计算值Computed values:格式化文档之前,根据样式表计算出的值
- 相对的URI将转化为绝对URI
-
float: left
将导致计算值为display:block
也发生在这一步 - 相对单位
em
将转化为px或类似单位(当然,如果font-size中用到了em,则需要到下一步才能算出)
- 使用值Used values:格式化文档之后,根据样式表及层叠关系计算出的值
- 百分比值转化为px或类似单位
- line-height的相应计算
- 真实值Actual values:使用值在一些UA中可能不允许被使用,因此还可能发生针对UA的转化
- 比如在chrome里面,px不允许有小数,因此就算使用值是33.333px,真实值将是33px。这可能导致一些subpixel bug
- 比如在kindle的浏览器里面,UA本身不支持灰度以外的颜色,因此所有的颜色将会转化会灰色
对应的值的查看,以Developer Tools截图为例:
我们可以注意到,实际项目中对计算值和使用值的区分并不重要,浏览器一般也未展现出计算值和使用值的区分。
CSSOM中定义了getComputedStyle,这个功能根据MDN2的描述,也返回Used values或Computed values中的一个。
回到题目,这个时候应当先比较SV、UV、AV(都是上面值的简写,请不要想歪),然后看一下height差1像素会是怎样的可能:
- 如果我们在css中指定了height(SV),但使用值(UV)却多出一个像素:多半出现了显式设置了height,但还是被默认撑高的模型,比如
display:table-cell
- 如果我们尚未指定height,但使用值比所有子元素都多出一个像素:可能出现了被默认创建的块框3,或者子孙元素的margin没能突破BFC的大牢
- 如果使用值(UV)比实际值(AV)多或者少1像素:多半是遇到了sub-pixel bug4了
当然,做出判断的前提是你了解高度计算的流程5。