侧向标题

Christian Heilmann 最近遇到了一个 有趣的 CSS 困境。 这个想法是将标题标签旋转 90 度，并沿内容博客的左侧对齐，而不是在顶部对齐。

很容易，对吧？

应该很简单吧？ 只需将标题绝对定位在左上角（这样它就不会占用任何垂直空间），然后使用 CSS 转换从其左上角旋转 90 度即可。 是的……这很酷，但问题是： **支持绝对定位的浏览器远远多于支持转换的浏览器**。 这是有问题的，因为对于那些浏览器，标题现在将位于内容之上并遮挡内容。

我的做法： 特征检测

我认为处理这个问题的最佳方法是使用 Modernizr 进行特征检测。 创建一个快速自定义版本，测试转换，将其加载到页面顶部，然后仅在可以处理转换的浏览器中应用绝对定位和转换（以及其他调整）。

因此……

完整的 CSS

aside {
    position: relative;  
}

aside h3 {
    background: #369;
    color: #fff;
    padding: 5px 10px;
    margin: 0 0 10px 0;
}

/* Class name via Modernizr */
.csstransforms aside {
    border-left: 34px solid #369;
    
    /* Make a little room */
    padding-left: 10px;
}
.csstransforms aside h3 {

    /* Abs positioning makes it not take up vert space */ 
    position: absolute;
    top: 0;
    left: 0;
    
    /* Border is the new background */
    background: none;
    
    /* Rotate from top left corner (not default) */
    -webkit-transform-origin: 0 0;
    -moz-transform-origin:    0 0;
    -ms-transform-origin:     0 0;
    -o-transform-origin:      0 0;
    
    -webkit-transform: rotate(90deg); 
    -moz-transform:    rotate(90deg); 
    -ms-transform:     rotate(90deg); 
    -o-transform:      rotate(90deg); 
}

查看演示   下载文件

这种技巧的 **缺点** 是，如果标题比可用空间长，它不会向下推动 aside 的高度以进行补偿。 基本上，仅用 CSS 无法做到这一点（你无法将某物的高度设置为与某物的宽度匹配）。 据了解，你可以使用 JavaScript 来实现。

我们可以在没有 Modernizr 的情况下做到吗？

Christian 等人不想使用 Modernizr（原因我无法理解；）。 Lennart Schoors 在他的帖子评论中提出了 这种技巧，其中段落元素本身也进行了转换（移动）。 默认情况下，aside 顶部会有很多空白，转换将它们向上移动以填补该空白。 如果没有转换，间隙仍然存在，为绝对定位的标题腾出空间。 相当聪明！

我发现的唯一不足是它专门针对段落元素。 在实际环境中，你可能无法依赖这一点，因此你要么编写一个选择器来涵盖所有可能要移动的元素，要么使用一个非语义包装器。 此外，这与我上面描述的关于标题长度的相同缺点有关。

欢迎改进！