2010-11-24 62 views
4

我有一些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/

+0

嗨,我的看法是:为什么把图像段内,而不是主要的div里面? – Mauro 2010-11-24 11:01:41

+0

你使用的是什么版本的Firefox?您提到的示例网站在Mac OS x上使用版本3.6.12看起来很好。 – z00bs 2010-11-24 11:03:19

回答

3

所以,我继续调查,以追查这个错误,我发现,当你使用一个CSS transform属性(不限旋转)这是重新渲染。通常在浮动元素之后的元素不知道与它重叠,而是在它下面流动(内容浮动,但段落的背景仍然跨越包含元素的整个宽度,位于浮动元素的后面)。

但是,当元素被旋转时,浏览器不会考虑浮动元素。旋转的元素将重叠浮动元素。在DOM中旋转元素之前的相对/绝对定位元素也是如此;它们也会重叠。

一些测试用例:jsFiddle