タイトルが説明しているように、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/ )