1

これは私が得たのと同じくらい近いです。IE 9 では、行ヘッダーの位置が間違っています。IE 8 では、テキストは右方向に回転しません (-90 度対 90 度)。Chrome では、列幅のサイズを変更できません。今のところ、これを IE 9 で正しく処理することにしました。回転した行ヘッダーを行に正しく配置するにはどうすればよいですか?

<html>
<head>
    <style type="text/css">
        .TableGroupHeader_cell
        {
            width: 3em;
            height: 20em;
            border: 2px solid #DDB575;
        }

        .TableGroupHeader_text
        {
            border : 1px solid black;
        }

        .TableGroupHeader_div
        {
            writing-mode:tb-rl;
           -webkit-transform:rotate(270deg);
           -moz-transform:rotate(270deg);
           -o-transform: rotate(270deg);

            text-align: center;
            font-weight: bold;
            font-size: large;
            border: 1px solid red;
            width: 10em;
            height: 2.5em;            
        }
    </style>
    <!--[if lt IE 9]>
        <style>            
            .TableGroupHeader_div
            {
                writing-mode:tb-rl;
               -ms-transform: rotate(10deg);

                text-align: center;
                font-weight: bold;
                font-size: large;
                border: 1px solid green;
                width: 2.5em;
                height: 10em;
            }
        </style>
    <![endif]-->

    <!--[if IE 9]>
        <style>            
            .TableGroupHeader_div
            {
                writing-mode:tb-rl;
               -ms-transform: rotate(180deg);

                text-align: center;
                font-weight: bold;
                font-size: large;
                border: 1px solid green;
                width: 2.5em;
                height: 10em;
            }
        </style>
    <![endif]-->

    <title>Test</title>
</head>
<body>
    <table>
        <tr class="TableDataRow">
            <td class="TableGroupHeader_cell">
                <div class="TableGroupHeader_div">
                    <label class="TableGroupHeader_text">Row Header</label>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
4

1 に答える 1

0

多くのバージョンの Explorer を手元に持っているわけではありませんが、このコードは今のところこのブラウザーで動作します。

  • ファイアフォックス 10.0.7 (Linux)
  • ファイアフォックス 14.0.1 (ウィンドウズ)
  • Opera 12.02 (Linux および Windows)
  • Explorer 9 (通常および互換ビュー)
<style type="text/css">
* { border: 0px; margin: 0px; padding: 0px; }  
.TableGroupHeader_cell { width: 3em; height: 20em; border: 2px solid #DDB575; }  
.TableGroupHeader_div { text-align: center; font-weight: bold; font-size: large; border: 1px solid red; width: 10em; height: 6.5em; }  
.TableGroupHeader_div { writing-mode:tb-rl; -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform: rotate(270deg); }  
.TableGroupHeader_text { border: 1px solid black; display: block; height: 100%; width: 100%; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);  }  
</style>

そのコードはあなたのもので、余分なものはほとんどありません。さらに、すべてのコメントを削除したため、エクスプローラーのバージョンは処理されません。そして、私はルールをより明確にするために分離しました。それが問題にならないことを願っています.

主な変更点は、ラベルをブロック コンポーネントとして設定し、フィルター プロパティをオブジェクトに適用することです。

ここでそれについて読むことができます：

さよなら

于 2012-10-14T07:13:19.123 に答える