Mobile Safari 奇怪的半透明框

发布于 2024-12-08 18:02:41 字数 562 浏览 0 评论 0原文

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

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

然后我使用 CSS3 旋转它们，像这样：

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

我还使用了 translate 属性。将它们放置在我想要的位置（而不是绝对定位），以实现向后兼容的目的。

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

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

原文

Okay, so I've got a couple of headers with links in them. Like this:

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

And then I rotate them using CSS3, like this:

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

I also use the translate prop. to position them where I want (rather than absolute positioning), for backwards compatibility purposes.

Now it looks perfect on Firefox or Chrome, but when I look at it on Mobile Safari it has these weird semi-transparent boxes going from the right of the container all the way off screen.

Any thoughts off hand? I can post examples if I have to, but before I do does anyone know what it could be? Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

汐鸠 2024-12-15 18:02:41

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

回复收藏 0 原文

意中人 2024-12-15 18:02:41

问题是 -webkit-transform 和 -moz-transform 是特定于浏览器的，并且不能与其他浏览器（即 Opera、IE 等）一起使用。参考：来自 MDN 的 CSS3 transform。桌面版 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);

The problem is that -webkit-transform and -moz-transform are browser-specific, and do not work with other browsers (i.e. Opera, IE, etc.). Reference: CSS3 transform from MDN. Safari for desktop should be working with -webkit-transform; the status on iOS Safari is unknown.

The following code should work on more browsers (i.e. it should be more portable):

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);

回复收藏 0 原文

~没有更多了~