“text-transform：uppercase”在加载过程中导致“跳跃”

Question

我有一个h2元素，其样式为text-transform: uppercase。当我使用此元素加载页面时，h2周围的容器元素会在加载期间更改高度。

Firefox 26和Chrome 31（两者都在OS X上）就是这种情况。

如何在装载过程中摆脱“跳跃”？

Answer 1

看起来因为文本转换，浏览器无法在正确的高度上呈现所有元素。

可以通过在height元素上设置h2来解决此问题。这样做，浏览器就拥有了所需的所有信息。当然，高度必须足够大，以便文本转换后的“结束版本”适合。