4

タイトルが説明しているように、CSS3 の一部に問題があります。私のウェブサイトarticleでは、

article { 
   transform: rotate(1deg) 
} 

(さらに、簡潔にするために省略されている 3 つのブラウザー ベンダー プレフィックス)

内部のコンテンツをまっすぐに保つために (背景だけが回転されます)、記事内のすべての要素を回転させて元に戻します。

article > * { 
    transform: rotate(-1deg)'; 
}

記事 (ブログの投稿) の内部には、通常、いくつかの がpあり、中には浮動画像が含まれている場合もあります。ただし、次のように画像を右に浮かべると:

<article>
  <p>
    <a href="#">
      <img src="x.jpg" style="float: right" />
    </a>
  </p>
  <p>Content here</p>
</article>

2 つ目<p>はイメージの左側に配置されますが (フロートするため)、ブロック レベルの要素であるため、 の幅全体を占め、フローティング イメージarticle重なり、リンクをクリックできない場所もあります。を無効にすると、transform: rotateこれは起こらないので、回転がレンダリングされる方法に関係していると思います。この問題は Chrome と FireFox で発生します。IE は回転をサポートしておらず、Opera はテストしていません。

誰でも修正方法を知っていますか?

(例: http://www.stephanmuller.nl/portfolio/stephanmuller-nl/ )

4

1 に答える 1

3

そこで、このバグを突き止めるために調査を行ったところ、CSStransformプロパティ (制限された回転ではない) を使用すると、再レンダリングされることがわかりました。通常、フローティング要素の後に来る要素は、それをオーバーラップするのではなく、その下に流れることを知っています (コンテンツはフロートしますが、たとえば、段落の背景は、フローティング要素の背後にある包含要素の幅全体にまたがります)。

ただし、要素が回転すると、ブラウザは浮動要素を考慮しません。回転した要素はフローティング要素と重なります。同じことが、DOM で回転された要素の前にある相対的/絶対的に配置された要素にも当てはまります。それらも重なります。

いくつかのテストケース: jsFiddle

于 2010-11-25T13:38:06.990 に答える