Question

好的，所以我有几个带有链接的标题。像这样：

<h1><a href="">text</a></h1>

然后我使用CSS3旋转它们，如下所示：

-webkit-transform: rotate(-90deg) translate(-63px, -117.5px);
-moz-transform: rotate(-90deg) translate(-63px, -117.5px);

我也使用翻译道具。为了向后兼容的目的，将它们定位在我想要的位置（而不是绝对定位）。

现在它在Firefox或Chrome上看起来很完美，但是当我在Mobile Safari上看它时，它会从容器的右边一直显示这些奇怪的半透明盒子。

手头有什么想法吗？如果必须，我可以发布示例，但在此之前，有人知道它可能是什么吗？谢谢！

Answer 1

我解决了。为了将来参考，问题是Mobile Safari中的一个错误。我有一个'文字装饰：下划线;'在我旋转的链接上，由于某种原因，Safari将其拉伸并使其部分透明。不知道为什么会这样做，但删除文本下划线解决了问题。谢谢你的想法，大家好！

Answer 2

问题是-webkit-transform和-moz-transform是特定于浏览器的，并且不适用于其他浏览器（即Opera，IE等）。参考：CSS3 transform from MDN。桌面Safari应与-webkit-transform一起使用; iOS Safari上的状态未知。

以下代码应适用于更多浏览器（即它应该更便于移植）：

transform: rotate(-90deg) translate(-63px, -117.5px);
-webkit-transform: rotate(-90deg) translate(-63px, -117.5px); 
-moz-transform: rotate(-90deg) translate(-63px, -117.5px);
-o-transform: rotate(-90deg) translate(-63px, -117.5px);
-ms-transform: rotate(-90deg) translate(-63px, -117.5px);

移动Safari奇怪的半透明盒子

2 个答案: