2

在这个网站上，我在显示手机号码的右上角有一个指向移动设备电话号码的链接。在台式机上，单击此链接时，Chrome 会忽略该链接，但 Firefox 和 Internet Explorer 会重定向到错误页面。

HTML：

<a href="tel:+491796737741" class="contact-info" ></a>

CSS：

#header .contact-info { width: 293px; height: 133px; display: block; float: right; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat transparent; margin-right: 20px; margin-top: 110px; }

我怎样才能解决这个问题？

4

2 回答 2

4

这个德语博客展示了一个简洁的解决方法，它适用于支持 CSS3 的浏览器。首先，tel:默认情况下使链接看起来像普通文本：

a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
    text-decoration:    none;
    color: #000;
}

然后，您为它们提供类似链接的样式，但仅在移动设备上：

@media only screen and (max-device-width: 480px) {
  a[href^="tel"]:link,
  a[href^="tel"]:visited,
  a[href^="tel"]:hover {
      text-decoration:    underline;
      color: blue;
   }
}

这有几个警告：

  • 它不适用于古老的桌面浏览器（IE7 等） - 您必须为每个tel:链接指定一个特定class的才能与所有浏览器一起使用（而不是依赖 CSS3href^="tel"位）

  • 它不会删除链接行为，只是将其隐藏一点。当然，您也可以通过默认设置和在移动设备上轻松地完全隐藏tel:链接display: nonedisplay: inline

  • 它将tel:在任何移动设备上显示链接，无论它们是否能够处理电话号码。

于 2013-06-30T13:59:06.953 回答
0

试图解决这个问题是个坏主意，因为 PC 能够为tel链接添加处理程序。例如，在我的 PC 上，Skype 设置为处理这些链接。

于 2018-05-31T13:01:47.970 回答