<span> 不从样式属性中获取颜色。或 iPad 上的样式表

Question

我有一个问题困扰了我好几个小时。我有以下html：

<div id='numbers'><span>+44 (0)845 519 7811<br />+44 (0)118 947 4888</span></div>

我已应用以下 CSS：

#numbers span {
    color:#CCC;
}

我检查了继承，没有发现任何问题。除了 iPad 和 iPhone 上的 Safari 之外，这段代码在我测试过的所有浏览器上都能正常显示（我可以点击它们，它会询问我是否要打电话），但是文本是白色的！我玩过，更改了 DIV Id 以确保我没有交叉样式，将 span color 更改为各种类型，没有任何改变。

有其他人遇到过这个问题吗？

（我正在使用带有 Jquery 的 touchstart 事件，当单击 <a> 时显示和隐藏此 DIV。我提到这一点是因为它可能会导致问题，但我看不出如何。）

Answer 1

您可以将以下元标记添加到 HTML 的头部，但您将失去点击电话号码的能力：

<meta name="format-detection" content="telephone=no">

或者尝试：

#numbers a {
    color:#CCC;
}

Answer 2

This question 包含您的答案。

问题在于 iOS 会自动将任何看起来像电话号码的东西变成链接。您可以通过以下方式禁用该功能：

<meta name="format-detection" content="telephone=no">

然后显式使用“tel” URI 方案，如下所示：

<a href="tel:+44 (0)845 519 7811">+44 (0)845 519 7811</a>

Answer 3

您可以始终定位电话号码链接并强制设置所需的样式，而不是完全禁用电话数据检测。

a[href^="tel:"] { 
    color: #CCC !important; 
    etc... 
}

这将覆盖 Monile Safari 的默认样式，而不向 HTML 添加各种额外的标记。