Html 删除 Microsoft Edge 的电话号码样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31978346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove Microsoft Edge's phone number styling
提问by karns
I noticed that the new Microsoft Edge browser overrides my styles when it detects phone numbers:
我注意到新的 Microsoft Edge 浏览器在检测到电话号码时会覆盖我的样式：
<span class="phone">(123)123-1234</span>
See this jsfiddle(must be opened using Microsoft Edge :P).
请参阅此 jsfiddle（必须使用 Microsoft Edge :P 打开）。
This sort of intrudes upon the design of the website, and is rather obnoxious. Sure seems like a trait of a successor to IE :/
这种侵入网站的设计，是相当令人讨厌的。当然似乎是 IE 继承者的特征：/
How can I override or disable this so my website users will not see it?
如何覆盖或禁用此功能，以便我的网站用户看不到它？
回答by scunliffe
You can get rid of it by adding this meta tag in the header of your pages.
您可以通过在页面标题中添加此元标记来摆脱它。
<meta name="format-detection" content="telephone=no">
Microsoft's documentation on this tag.
Hopefully there will be a better way to turn this off globally without bloating pages... Or better yet disable this feature by default.
希望有更好的方法可以在不使页面膨胀的情况下全局关闭此功能……或者最好在默认情况下禁用此功能。
回答by maguy
If you don't want to disable for an entire page as the selected answer suggests, you can add the following attribute to a specific tag
如果您不想按照所选答案的建议禁用整个页面，则可以将以下属性添加到特定标签
<p x-ms-format-detection="none">
参考：https: //docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265018(v=vs.85)#controlling-phone-number-detection
回答by cameron
The above answer works perfectly, but disables the ability to have click to call phone numbers (which is a major problem if you are building a responsive site). I have found a better work around to be make the phone number a link. Example:
上面的答案完美无缺，但禁用了点击呼叫电话号码的功能（如果您正在构建响应式网站，这是一个主要问题）。我找到了一个更好的解决方法，将电话号码作为链接。例子：
<a href="tel:888-888-8888">(888) 888-8888</a>
This would then allow you to style the "link" however you want, and the "a" styles in your CSS override the Edge and iPhone styles on the phone number. The only issue with this is it makes the phone number a link for all devices, but I have found this not to be an issue as almost every device has some sort of click to call feature or app included.
这将允许您根据需要设置“链接”的样式，并且 CSS 中的“a”样式覆盖电话号码上的 Edge 和 iPhone 样式。唯一的问题是它使电话号码成为所有设备的链接，但我发现这不是问题，因为几乎每个设备都包含某种点击呼叫功能或应用程序。
回答by Jools
I've faced this issue, but with a slightly different use case: The number it's highlighting is not a phone number, so I don't want any special formatting.
我遇到过这个问题，但用例略有不同：它突出显示的数字不是电话号码，所以我不想要任何特殊格式。
For example you might have something like:
例如，您可能有以下内容：
<div>The current date/time: May 08 2017 10:44:58 GMT Daylight Time</div>
For me*, Edge will convert 08 2017 10into a phone number link. Thanks, Edge!
对我来说*，Edge 将转换08 2017 10为电话号码链接。谢谢，边缘！
I've found that you can get around this by inserting invisible inline-blockelement into the middle of the string:
我发现你可以通过inline-block在字符串中间插入不可见元素来解决这个问题：
.notel{
display:inline-block;
height:0px;
width:0px;
}<span class="phone">(763)219-5222</span>
<div>The current date/time: May 08 2017 10:44:58 GMT Daylight Time</div>
<br>
<span class="phone">(763)2<span class="notel"></span>19-5222</span>
<div>The current date/time: May 08 2<span class="notel"></span>017 10:44:58 GMT Daylight Time</div>I can't see if this works for your phone number as I don't see highlighting in either case. You might need to nudge the positioning of the span.
我不知道这是否适用于您的电话号码，因为在任何一种情况下我都没有看到突出显示。您可能需要微调跨度的位置。
Incidentally, the fact that you can do this is one of the many reasons you shouldn't copy commands off webpages and into your terminal:
顺便说一句，您可以这样做的事实是您不应该将命令从网页复制到终端中的众多原因之一：
span{
display:inline-block;
height: 0px;
width: 0px;
overflow:hidden;
}
textarea{
width: 300px;
height:50px;
}<div>echo "HELLO" <span>&& wreck this machine</span></div><div>echo "WORLD"</div>
<textarea ></textarea>
<div>
Select, copy and paste above commands into the textarea.
</div>*I think Edge's highlighting of numbers is regional. Your jsfiddle isn't highlighted for me, but I'm in the UK. Here is seems to highlight numbers that begin with 0.
*我认为 Edge 对数字的突出显示是区域性的。你的 jsfiddle 没有为我突出显示，但我在英国。这里似乎突出显示了以 0 开头的数字。
