CSS3 旋转渲染元素以使它们重叠浮动

发布于 2024-10-03 19:01:51 字数 963 浏览 3 评论 0原文

正如标题所述,我对某些 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

謌踐踏愛綪 2024-10-10 19:01:51

因此,我进行了一项调查来追踪这个错误,我发现当您使用 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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文