0

次のようなテーブルがあります(Chrome、Opera、FF):
ここに画像の説明を入力

しかし、IE (7,8,9) ブラウザーでは、このテーブルが次のように表示されます。
IE ブラウザ

質問: 列幅を調整するにはどうすればよいですか?

私は 2 つの CSS クラスを持っています: td タグの場合:

.td__vertical{
         text-align:center;
         vertical-align:bottom;
         border:  1px double  #8EB340 ;
         font-size:11px; 
         color:#666; 
         background-color: #F0F4E7; 
         padding: 0px 0px 20px 0px;
         margin: 0px 0px 0px 0px;
         width:30px;
}

td タグ内にある div の場合:

.rotated{
        transform: rotate(-90deg); 
        -webkit-transform: rotate(-90deg); 
        -moz-transform: rotate(-90deg);
        -o-transform-origin:      0 0;
        -o-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        -ms-transform: rotate(-90deg);
        white-space: nowrap; 
        width: 30px;
}

したがって、列は次のように記述されます。

<td class="td__vertical"><div class="rotated" >Column2 Column2 Col..</div></td>

Chrome、Opera、FF は「幅: 30px;」に反応します。「rotated」クラスと「td__vertical」の「width」は関係ありません。しかし、IEはそれらのいずれも使用しませんでした。「マトリックス」を介した回転も同じ効果があります。

UPD:列幅がテキストの幅、つまり、回転していない状態のテキストの幅であることを調べました。では、列の幅の自動調整をオフにするにはどうすればよいですか?

4

1 に答える 1

1

IE でテキストが上から下に読み込まれることを気にしない場合は、書き込みモードを使用できます。

-ms-writing-mode: tb-lr;

これは 回転 と同等です90degs。エミュレートすることはできません-90degs

もちろん、 と を削除する必要がfilter: progidありms-transformます。

http://msdn.microsoft.com/en-us/library/ie/ms531187(v=vs.85).aspx

于 2012-11-07T04:24:50.493 に答える