html - 当内容旋转文本时包含元素不垂直扩展

Question

我有一个表格，其中包含一些 th 标签，这些标签包含通过 CSS 旋转的文本。我遇到的问题是 th 没有随内容垂直扩展。这是我的标记的基本示例:

HTML:

<table>
    <thead>
        <th>
            <div class="rotated-text">Some Text</div>
        </th>
        <th>
            <div class="rotated-text">Some More Text</div>
        </th>
        <th>
            <div class="rotated-text">Even More Text</div>
        </th>
    </thead>
</table>

CSS:

.rotated-text {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
}

示例:http://jsfiddle.net/UPFkX/1/

Answer 1

包含的元素无法扩展，因为 css 转换(和 IE 过滤器)不会影响 box model .

引用 Marco Miltenburg 的话:

If I'm not mistaken elements are part of the normal flow or are floated as if they are not transformed. Once their position has been established, then the transformation or transition is performed. The transformation or transition will not have any influence on the document flow or any floating anymore.

您可以在 SO here 上找到他对类似问题的回答.

实际上，转换元素的 width 属性现在实际上会改变它的可见“高度”，而 height 属性会改变它的可见“宽度”。简而言之:

通过 css 转换，转换的是外观，而不是元素本身或它对文档流的“影响”。

什么可能对您有帮助(视情况而定):

将每个转换元素的 height 属性设置为其 width 以像素为单位。这将按照您想要的方式影响容器的高度。

编辑:

正如 Juan Rangel 在他的回答中所说，您可以使用 javascript 来解决问题。我完全同意这一点——他将用 jquery 做的事情与我上面所说的一样。如果您不知道转换后的元素有多高，那甚至可能是更好的解决方案，但请记住(少量)客户端不允许您使用 javascript。无论如何，不​​幸的是你将不得不妥协。