为什么不能转换内联元素？ [英] Why can't inline elements be transformed?

问题描述

但编辑器显示的边界为：

您可以清楚地看到背景和元素的边界根本不匹配。没有明确的界限，转换因为困难而不是非常有用。

The CSS transformations spec says transforms only work on block-level or atomic inline-level elements (e.g. inline-block). But why don't they work on inline elements? What is the reasoning behind this limitation?

This test by Microsoft shows it's possible. It passes in IE9, but not in Chrome. So it's possible, just not by the spec.

解决方案

As @Shikkediel mentioned, inline elements do not have strong boundary like block elements do. They don't influence the flow of the document in the same way, if at all, and are tightly bound to their neighboring text or elements. CSS transforms operate on the bounding box (which inline elements do technically have) in a way that wouldn't really make sense for inline elements.

Consider a <strong> within a <span> (or div). The bold text is defined only by the change in style, but can flow across multiple lines and does not have a predictable rectangular bounding area. If you were to apply a CSS rotation, where would it rotate from? How would it reflow, if at all, while rotating?

On the other hand, the containing <span> does have rectangular bounds, so finding the center and corners, rotating and scaling, are all predictable and well-defined.

As an example, take this fiddle. The background of the inline element is:

but the bounds shown by the editor are:

You can clearly see that the background and the element's bounds do not match at all. Without clear bounds, transforms because difficult and not very useful.

这篇关于为什么不能转换内联元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！