代码之家 › 专栏 › 技术社区 › Stephan Muller

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

html-rendering css3 html

4

Stephan Muller · 技术社区 · 13 年前

我对一些CSS3的东西有问题,正如标题所描述的。在我的网站上,我使用了 article 那有一个

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> 将结束于图像的左侧(因为它是浮动的),但因为它是块级元素,所以它将占据 文章 和重叠使链接在某些地方无法单击的浮动图像。当我禁用 transform: rotate 这不会发生,所以我认为这与旋转的渲染方式有关。这个问题出现在Chrome和FireFox中,IE不支持rotate和Opera,我还没有测试过。

有人知道怎么修理吗?

(例如: http://www.stephanmuller.nl/portfolio/stephanmuller-nl/ )

1 回复 | 直到 13 年前

1

3

Stephan Muller 10 年前

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

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

一些测试用例: jsFiddle