跨度内跨度的样式不起作用答案

【问题标题】：Style of span inside span doesn't work跨度内跨度的样式不起作用
【发布时间】：2013-07-26 15:26:50
【问题描述】：

我有 HTML 代码：

<div>
    <span>e</span>
    <span id="transform">w</span>
    <span>q</span>
</div>

还有一个 CSS：

#transform{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

字母“w”看起来是垂直翻转的。那是对的。但是当我用跨度包装跨度时：

<div>
    <span>
        <span>e</span>
    </span>
    <span>
        <span id="transform">w</span>
    </span>
    <span>
        <span>q</span>
    </span>
</div>

而且字母看起来没有翻转，这意味着我的 css 不起作用。为什么？

【问题讨论】：

标签： css transform html

【解决方案1】：

要在元素上使用transform，该元素必须具有某种块状显示，例如display: block 或display: inline-block。

这里最合适的解决方法是：

#transform {
    display: inline-block;
}

一切看起来都一样，只是你的字母会被翻转。

【讨论】：

【解决方案2】：

您需要将显示值更改为block - 因为<span> 元素默认是内联的，而transform 属性仅适用于transformable elements（块级和原子级内联元素）

#transform{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
     transform: rotate(180deg);
     display: block;
    }

http://jsfiddle.net/a7EXc/

【讨论】：