6

さまざまなテキストブロックを回転させて縦向きにし、プレビューしてから印刷するダイアグラム上の非常に特定の場所に配置しようとしています。CSS は、IE、FF、さらには Opera でもテキストを非常にうまく回転させます。

しかし、回転した要素を配置しようとすると、IE 7 & 8 (6 については心配していません) は完全に壊れ、要素は元の位置にとどまります。これを回避する方法はありますか？これらのラベルが配置されている場所をピクセル単位で制御する必要があります。

HTML

  <div class="content rotate">
    <div id="Div1" class="txtblock">Ardvark Avacado<br />Awkward</div>
    <div id="Div2" class="txtblock">Brownies<br />Bacteria Brussel Sprouts</div>
  </div>

CSS

div.content {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 30px;
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; }

.rotate  {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

.txtblock {
    width: auto;
    position: absolute;
    }

#Div1 {
    left:44px; 
    top:70px; 
    border:red 3px solid; }

#Div2 {
    left:13px; 
    top:170px; 
    border:purple 3px solid;  }
4

3 に答える 3

5

これは、私がかなりの時間を費やした問題のように思えます。私は、ポール アイリッシュのブログ投稿に、私の調査結果を詳述した 2 つのコメントを残しました。ここに私が書いたものがあります：

IE6 および 7: 回転フィルターが CSS に表示される前に、回転される div で少なくとも高さまたは幅を宣言する必要があります。ただし、これを行っても、回転フィルターがコードに表示された後にその div に適用されたスタイルは適用されません。その div の子に適用されるスタイルにも同じことが当てはまるようです。変。

IE8: 問題ないようです。回転フィルターがコードに表示された後、div にスタイルを正常に適用しました (高さまたは幅を初めて宣言することを含む)。

...そしてレポートする CSS ローテーションの奇妙さ:

IE6 および 7 では、私がいくつかコメントを投稿したルールに従っている場合でも、外部 CSS ファイルごとに複数の回転フィルターを使用すると、サイトが完全に機能しなくなります。ローテーション フィルタごとに個別の CSS ファイルを用意するか、html のヘッドにある独自のスタイル タグにネストされた各フィルタを追加する必要があります。そうしないと、最初に回転したオブジェクトのみが表示されますが、これでもぼやけて不適切な角度になります。

面白いことに、DOCTYPE を削除すると、すべての回転が完全にレンダリングされるため、Quirks モードは複数の回転フィルターを処理する方法を知っていると思いますか? また、より大きく、より複雑なスタイルシートでは、さらに奇妙な副作用がありましたが、その原因を特定することはできませんでした. とにかく…</p>

お持ち帰りメッセージ:

独自の ms フィルターを 1 つだけ使用します: (ローテーションに使用する場合は、少なくとも) 外部スタイルシートごとに。および.. HTML の各ローテーション フィルタは、独自のスタイル タグのセット内にある必要があります。

私の問題は少し異なっていましたが、2 つの内側の div が親によって回転されているという同様の状況に遭遇している可能性があります。試してみる価値があります。少なくとも、.rotate 宣言をスタイルシートの一番下に移動してみてください。

于 2010-11-04T04:18:18.330 に答える
2

このコードを試してください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Centrsource najboljše Ponudbe</title>
    <style type="text/css">
    #content {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 30px;
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; 
    }

.txtblock {
 display:block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }


    </style>
</head>
<body>
<div id="content">
    <div class="txtblock">Ardvark Avacado<br />Awkward</div>
</div>
</body>

</html>

コードを間違った要素に適用しています。また、これを理解するための他の人への参照としてhttp://snook.ca/archives/html_and_css/css-text-rotation

于 2010-04-13T15:22:21.510 に答える
0

外側のコンテナーではなく、txtblocks に回転を配置すると、これが機能することがわかりました。

デモ

于 2010-04-13T15:18:10.790 に答える