IE7 / 8 css问题与旋转div内容

Question

我有一个包含表格的div。单击表格中的按钮，我想将div及其内容旋转90度并隐藏除屏幕外的所有内容。以下是IE10中的一个示例：

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

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

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代码或小提琴的完整示例没有帮助，那么社区可以更好地帮助您。

Answer 2

问题是我使用开发人员工具在浏览器之间切换。显然，这会更改某些浏览器安全设置。使用IE10中的开发人员工具无法准确表示IE7 / IE8实际显示的方式。

我下载了IETester，内容不再出现此问题了。误报。

Answer 3

关于按钮的关联点击事件使用jquery来旋转div及其所有子项

function changeOrientation(){
$('#div').attr('webkit-transform', 'rotate(90deg)'); 
//Loop inside all elements in the div and add the same to all the elemnt

}

javascript代码

function changeOrientation(){
    document.getElementById('#div').style.webkit-transform = 'rotate(90deg)'; 
    //Loop inside all elements in the div and add the same to all the elemnt
for(var count = 0; count < document.getElementById('#div').children.length; count++){
document.getElementById('#div').children[count].style.webkit-transform = 'rotate(90deg)'; 
}
}

尝试一下，让我知道它是否有效。