MobileSafari怪异半透明盒

好的，我有几个标题，里面有链接。像这样：

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

-webkit变换：旋转（-90度）平移（-63px，-117.5px）；
-moz变换：旋转（-90度）平移（-63px，-117.5px）；

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

现在，它在Firefox或Chrome上看起来非常完美，但当我在Mobile Safari上看到它时，它有一些奇怪的半透明框，从容器的右侧一直延伸到屏幕之外

---

有什么想法吗？如果有必要，我可以举一些例子，但在此之前，有人知道它可能是什么吗？谢谢

问题在于

-webkit-transform

和

-moz-transform

是特定于浏览器的，不适用于其他浏览器（如Opera、IE等）。参考文献：。Safari for desktop应与

-webkit transform

配合使用；iOS Safari上的状态未知

以下代码应适用于更多浏览器（即，它应更具可移植性）：

变换：旋转（-90度）平移（-63px，-117.5px）；
-webkit变换：旋转（-90度）平移（-63px，-117.5px）；
-moz变换：旋转（-90度）平移（-63px，-117.5px）；
-o变换：旋转（-90度）平移（-63px，-117.5px）；
-ms变换：旋转（-90度）平移（-63px，-117.5px）；

我解决了它。作为将来的参考，这个问题是mobilesafari中的一个bug。

---

我有一个“文本装饰：下划线；”在我旋转的链接上，出于某种原因，Safari将其拉伸，使其部分透明。不知道为什么会这样做，但删除文本下划线解决了问题。谢谢大家的想法

Mobile Safari中的一个bug，无法正确呈现转换？你是否设置了一个空白页面，除了旋转之外什么都没有，只是为了看看它是否仍然存在？是的！正如我发现的，是文本下划线有问题。不知道为什么，但这就是问题所在。当我删除文本下划线时，问题就解决了。所以看起来文本会旋转，但下划线会保留在原来的位置，就像方框中的幽灵一样？肯定是移动Webkit渲染问题。您的答案似乎无法解决OP的问题。如果CSS规则适用于Mobile Safari，那么它应该可以正常工作。如果CSS规则不适用于Mobile Safari，那么应该忽略它。那么是什么解释了他描述的奇怪的轮廓呢？这取决于OP在页面上有哪些与元素相关的CSS样式。你清楚地说，“问题在于……”。然而，如果这是由他页面上的其他内容引起的，那么这并不是你的答案所确定的问题。换句话说，我们谈论的是移动Safari，而你是说专门针对桌面浏览器的CSS规则是问题所在。这怎么可能？Mobile Safari是否使用Webkit规则？如果是这样的话，那么它看起来像一个bug。不，这不是问题所在~我有所有的前缀版本，但我只包括了对我解释问题很重要的两个版本。谢谢你的回答！如果你自己的答案有效，你可以自由地接受它，因为它解决了你自己的问题。@mc10，是的，OP应该记住接受他自己的答案。然而，他至少在48小时内不允许这样做。