我有一些CSS3的东西,正如标题所描述的问题。在我的网站,我用一对夫妇的article
的是有一个CSS3旋转呈现元素,使它们重叠浮动
article {
transform: rotate(1deg)
}
(加上三个浏览器供应商前缀,为了简洁离开了)
要保持里面的内容直线上升(只是背景旋转)我回用
article > * {
transform: rotate(-1deg)';
}
的文章里(他们的博客文章)通常有一对夫妇的p
的,有时浮动图像内旋转文章内的所有元素。然而,当我浮动图像右像这样:
<article>
<p>
<a href="#">
<img src="x.jpg" style="float: right" />
</a>
</p>
<p>Content here</p>
</article>
第二<p>
将最终的图像的左侧(因为它漂浮),但是因为它是一个块级元素它会占用的整个宽度的article
和重叠浮动图像使链接在某些地方无法点击。当我禁用transform: rotate
这不会发生,所以我认为它与呈现旋转的方式有关。问题发生在Chrome和FireFox中,IE不支持旋转和Opera我没有测试过。
任何人都有一个想法如何解决?
(例如:http://www.stephanmuller.nl/portfolio/stephanmuller-nl/)
嗨,我的看法是:为什么把图像段内,而不是主要的div里面? – Mauro 2010-11-24 11:01:41
你使用的是什么版本的Firefox?您提到的示例网站在Mac OS x上使用版本3.6.12看起来很好。 – z00bs 2010-11-24 11:03:19