CSS3 旋转渲染元素以使它们重叠浮动
正如标题所述,我对某些 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>
第二个
将最终到达图像的左侧(因为它浮动),但因为它是块级元素,所以它会占用
文章
的完整宽度和重叠浮动图像使得链接在某些地方不可点击。当我禁用 transform:rotate
时,这种情况不会发生,所以我认为这与旋转的渲染方式有关。该问题出现在Chrome和FireFox中,IE不支持旋转,Opera我没有测试过。
有人知道如何修复吗?
(示例:http://www.stephanmuller.nl/portfolio/stephanmuller-nl/)
I have a problem with some CSS3 stuff, as the title describes. In my website I use a couple of article
's that have a
article {
transform: rotate(1deg)
}
(plus the three browser vendor prefixes, left out for brevity)
To keep the content inside straight up (just the background is rotated) I rotate all the elements inside the articles back by using
article > * {
transform: rotate(-1deg)';
}
Inside the articles (they're blog posts) there's usually a couple of p
's and sometimes a floating image inside. However, when I float an image right like so:
<article>
<p>
<a href="#">
<img src="x.jpg" style="float: right" />
</a>
</p>
<p>Content here</p>
</article>
The second <p>
will end up to the left of the image (because it floats) but because it's a block-level element it will take up the full width of the article
and overlap the floating image making the link not clickable in some places. When I disable the transform: rotate
this doesn't happen, so I think it has to do with the way the rotate is rendered. The problem occurs in Chrome and FireFox, IE doesn't support rotate and Opera I haven't tested.
Anyone have an idea how to fix?
(example: http://www.stephanmuller.nl/portfolio/stephanmuller-nl/ )
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
因此,我进行了一项调查来追踪这个错误,我发现当您使用 CSS
transform
属性(不限于旋转)时,它会重新渲染。通常,位于浮动元素之后的元素不会与浮动元素重叠,而是在浮动元素下方流动(内容浮动,但段落的背景例如仍然跨越包含元素的整个宽度,位于浮动元素后面)。然而,当元素旋转时,浏览器不会考虑浮动元素。旋转的元素将与浮动元素重叠。对于 DOM 中旋转元素之前的相对/绝对定位元素也是如此;它们也会重叠。
一些测试用例: jsFiddle
So, I went on an investigation to track down this bug, and I found out that when you use a CSS
transform
property (not limited rotate) it is re-rendered. Usually elements that come after a floating element know not to overlap it but to flow under it (the content floats but the background of a paragraph for instance still span the entire width of the containing element, going behind the floating element).When an element is rotated however the browser doesn't take in account the floating elements. The rotated element will overlap floating elements. The same goes for relatively/absolutely positioned elements that come before the rotated element in the DOM; they get overlapped too.
Some test cases: jsFiddle