首页 > 解决方案 > 链接在 iPhone 中呈现为巨大的空框

问题描述

我刚刚收到一位客户的投诉,她最近购买了 iPhone 代替了她的旧 Android 手机:我为她建立的网站上的链接显示为巨大的空框。

这是她的网站

以下是她发给我的一些屏幕截图,可以说明问题: 第一张照片 第二张图片 在此处输入图像描述

她告诉我,她有朋友使用(各种型号的)iPhone,看看他们是否有相同的行为,他们都得到相同的东西:链接应该在的大空盒子。

我自己没有 iPhone,通常不会在 iPhone 上测试我的网站,主要是因为我从未听到过 iPhone 用户的任何投诉。当然,我正在重新评估这种方法!

我做了一些一般性的谷歌搜索,我也在 Stack Overflow 上进行了搜索,但没有发现任何关于 iPhone 链接问题的具体问题。我很惊讶这似乎不是已知解决方案的众所周知的问题。或者也许我的搜索技巧不是我想象的那样。

谁能建议我为什么要得到这个巨大的空框以及如何使它们呈现为正确的链接,就像它们在我的 Windows 笔记本电脑和 Android 手机中一样?适用于所有当前/流行版本的 iPhone 的解决方案将是理想的。随意在您的浏览器中检查我的代码,但我认为我没有做任何太奇特的事情。

标签: htmlcssios

解决方案


此问题在 Safari 中可见,而不仅仅是在 iPhone 上。它与这段css有关:

  a::before {
    content: url("../images/link-white_16x16.jpg") " ";
  }

该图像不存在,生成的 URL 会将您带到域停放页面。我猜 Safari 只是放在广场上,因为图像不存在。


推荐阅读