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:と、IE7 で動作しなくなります。要素で相対位置を使用しているため、最後にそれをテストすることをお勧めします。relativeabsolute

それが役に立たない場合は、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 に答える