移动端HTML渲染数字

Question

我有一个移动端网页，显示银行对账单，类似于这样：

DATE          | DESCRIPTION              | AMOUNT
--------------|--------------------------|---------------
Jan 2nd 2010  | Clothes                  |  USD 1.839.000
Sep 23rd 2010 | Drinks                   |  USD 2.837.000

我使用.作为千位分隔符，因为这是我们的本地配置。

HTML非常简单。像这样：

<table>
   <tr>
      <td>DATE</td>
      <td>Clothes</td>
      <td>AMOUNT</td>
   </tr>
   <tr>
      <td>Jan 2nd 2010</td>
      <td>Clothes</td>
      <td>USD 1.839.000</td>
   </tr>
   <tr>
      <td>Sep 23rd 2010</td>
      <td>Drinks</td>
      <td>USD 2.837.000</td>
   </tr>
</table>

我遇到的问题是，iPhone的Safari、Android浏览器和一些诺基亚浏览器会错误地将数字（例如1.839.000和2.837.000）视为电话号码，因此将它们呈现为链接以进行电话呼叫或发送短信。

我的问题是：有没有特殊的标签/属性/CSS样式可以告诉移动浏览器将那种文本显示为纯文本？

非常感谢。

- Pablo Santa Cruz

---

有趣的问题。在中间添加span标签是否有帮助？：<span>2</span>.837<span>.000</span> - Pekka

@Pekka：让我试试。谢谢！ - Pablo Santa Cruz

不错！但这当然有点拙劣。如果整个页面上没有电话号码，Kenny/Brian的建议可能更好。无论如何，我会把它添加为答案。 - Pekka

Answer 1

我不了解Android或Nokia，但是对于iPhone，您可以使用meta标签：

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

禁用将任何内容识别为电话号码。

- kennytm

---

难以置信，终于有一些东西不再被Opera Mobile Classic忽略了！！这真的起作用了，我很感动，快要哭了:P - andreszs

保留点击拨号功能但移除蓝色下划线效果： a[href^=tel] { color: inherit; text-decoration: none; } - Anne-Claire

Answer 2

如果您想保留识别电话号码并允许轻触的功能，请使用此解决方案：

由于iOS在电话号码周围添加了<a href="tel[phone]">标签，因此您只需要创建一个样式化此标签的CSS规则：

a[href^=tel] { color: inherit; }

感谢this Razor Edge Labs文章提供的帮助。

- Bakabaka

Answer 3

这是如何操作的（适用于iPhone），在Android上也似乎有效；它可能在其他浏览器中也可行，但目前我只能进行这些测试：

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

- Brian Campbell

Answer 4

虽然可能性很小，但是试试将句号写成. - 有一些智能代码可以在移动Safari等设备上禁用它，但这只适用于一两个设备。如果你幸运的话，你就可以绕过他们的正则表达式。

- pp19dd

---

是的，这个（我今天的投票用完了），或者作为最后的手段，可能会使用一些看起来像“.”的奇怪Unicode字符。 - Pekka

Answer 5

正如评论中所讨论的那样，添加任意的span标签似乎会破坏浏览器对于该问题的检测：

<span>2</span>.837<span>.000</span>

然而，当然更好的方式是以“不解析此内容”属性或元标签的形式提供一个明确的解决方案，因为这样可以更加确保在未来和大多数平台上都能正常工作。

- Pekka