css - 如何在浏览器窗口的一侧创建一个选项卡集？

Question

我正在尝试在浏览器窗口的一侧创建一个侧向选项卡集 - 如下所示：

到目前为止相关的css代码：

left: -29px;
transform: rotate(-270deg);
-ms-transform: rotate(-270deg); /* IE 9 */
-webkit-transform: rotate(-270deg); /* Safari and Chrome */
-o-transform: rotate(-270deg); /* Opera */
-moz-transform: rotate(-270deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* for earlier versions of IE */

这对于 Firefox、Chrome 和 IE9 非常有效——但对于以前版本的 IE，该选项卡不会显示。问题似乎出在left: -29px;代码上；如果我将它设置为 0，它在 IE8 和更早版本中看起来是正确的，但在 IE9、Firefox 或 Chrome 中则不正确。

处理这个问题的最佳方法是什么？

Answer 1

作为临时 hack，您可以添加一个 IE 版本的条件样式表，将left属性覆盖为 0：

<!--[if lt IE 9]>
    <style>

    #myElement {
        left: 0px;
    }

    </style>
<![endif]-->

这里的问题可能是发生旋转的原点不一样。我会看看是否能找到任何关于指定转换原点的信息。