4

正如标题所描述的，我对一些 CSS3 的东西有疑问。在我的网站中，我使用了article几个

article { 
   transform: rotate(1deg) 
}

（加上三个浏览器供应商前缀，为简洁起见省略）

为了使内容保持直立（仅旋转背景），我使用以下方法将文章内的所有元素旋转回来

article > * { 
    transform: rotate(-1deg)'; 
}

在文章内部（它们是博客文章）通常有几个p's，有时里面有一个浮动图像。但是，当我像这样浮动图像时：

<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/）

4

1 回答 1

3

因此，我进行了调查以追踪此错误，我发现当您使用 CSStransform属性（不限于旋转）时，它会重新渲染。通常，在浮动元素之后的元素知道不与它重叠，而是在其下方流动（内容浮动，但例如段落的背景仍然跨越包含元素的整个宽度，位于浮动元素的后面）。

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

一些测试用例：jsFiddle

于 2010-11-25T13:38:06.990 回答