css - 旋转 div 内容的 IE7/8 css 问题

Question

我有一个包含表格的 div。单击表格中的按钮时，我想将 div 及其内容旋转 90 度并隐藏除标题外的所有内容。这是在 IE10 中工作的示例:

但是，这在 IE7 和 IE8 中不起作用。通过开发人员工具栏检查元素，表格似乎没有旋转。 div 似乎在旋转，因为轮廓出现在它应该出现的位置...但是，好像实际的 UI 没有更新以反射(reflect)这种旋转？

任何想法可能会发生什么以及如何解决这个问题？

一些与 IE7 相关的 css:

#my-div {
    width: auto;
    float: left;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 200px;
    min-height: 35px;
    height: 100%;
    display: block;
}

#my-div.hide
{
    overflow: hidden;
    height: 35px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

#my-div table
{
    width: auto;
}

而且 html 也没什么特别的。它的布局如下:

<div id="my-div">
    <table>
        <thead>
            <tr>
                <th>
                    <button>X</button> 
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr> 
            ...
        </tbody>
    </table>
</div>

Answer 1

您的代码应该适用于 IE7。如果你无法让它工作，有一个名为 CSS Sandpaper 的 JavaScript 库。这允许您使用 CSS 代码进行旋转，并且适用于旧版本的 IE。

编辑:我正在使用 MS Developer Network 中的示例代码并注意到他们的示例在所有版本的 IE 上都能正常工作。如果我将 position: 更改为 relative 而不是 absolute 则旋转在 IE7 中停止工作。由于您在元素上使用相对定位，因此您可能想在您的终端进行测试。

如果这对您没有帮助，您的 HTML 代码的完整示例或 fiddle 会有所帮助，以便社区可以更好地帮助您。