1

我有一个包含表格的 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>
4

3 回答 3

1

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

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

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

于 2013-09-18T23:05:32.383 回答
0

问题是我正在使用开发人员工具在浏览器之间切换。显然，这会改变一些浏览器的安全设置。这在 IE7/IE8 中的实际外观并不能通过使用 IE10 中的开发人员工具来准确表示。

我下载了IETester，内容没有这个问题了。虚惊。

于 2013-09-24T20:35:17.637 回答
-1

在按钮的关联单击事件上，使用 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)'; 
}
}

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

于 2013-09-24T12:57:46.453 回答