谷歌浏览器计算值异常

Question

根据规范，vertical-align 属性的百分比相对于元素本身的line-height 属性。所以我做了一个测试，在 Chrome 开发工具中，计算值不像 Firefox 和 IE11 那样以像素为单位。这种行为很奇怪，我想知道这是一个错误还是？我知道 Chrome 中的所有其他值都是按像素计算的，很奇怪 vertical-align 没有按像素计算。

这里是测试http://jsfiddle.net/blaja/r5m2yc7e/

Answer 1

propdef for vertical-align 确实表示，指定为百分比的值必须根据行高计算为绝对长度，即像素值。根据浏览器对“计算值”的定义是否应该与CSS definition 一致，这可能是也可能不是错误本身。

就此而言，所有三个浏览器似乎都错误地将line-height 计算为绝对值。规范说如果指定的值是一个数字，而不是一个长度，那么the computed value is the same as the specified value；除非指定为绝对长度（或百分比），否则不应解析为绝对长度。在您的情况下，line-height 在p 元素上指定为1.5。 span 应该继承相同的值，then 用于计算渲染行框所需的确切行高。结果行高是used value，而不是计算值。