Microsoft Edgeの電話番号スタイリングを削除する

新しいMicrosoft Edgeブラウザが電話番号を検出すると、スタイルが上書きされることに気づきました。

<span class="phone">(123)123-1234</span>

このjsfiddleを参照してください（Microsoft Edge：Pを使用して開く必要があります）。

この種のことはウェブサイトのデザインに侵入し、かなり不愉快です。確かにIEの後継者の特徴のように思えます：/

これを上書きまたは無効にして、Webサイトのユーザーに表示されないようにするにはどうすればよいですか？

このメタタグをページのヘッダーに追加することで、それを取り除くことができます。

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

このタグに関するMicrosoftのドキュメント。

うまくいけば、ページを肥大化させることなく、これをグローバルにオフにするより良い方法があるでしょう...あるいは、デフォルトでこの機能を無効にするのが良いでしょう。

選択した回答が示唆するようにページ全体で無効にしたくない場合は、次の属性を特定のタグに追加できます

<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

上記の答えは完全に機能しますが、クリックツーコールの電話番号を使用する機能を無効にします（レスポンシブサイトを構築している場合、これは大きな問題です）。電話番号をリンクにする方がより良い回避策を見つけました。例：

<a href="tel:888-888-8888">(888) 888-8888</a>

これにより、必要に応じて「リンク」のスタイルを設定でき、CSSの「a」スタイルが電話番号のEdgeおよびiPhoneスタイルをオーバーライドします。これに関する唯一の問題は、電話番号がすべてのデバイスのリンクになることですが、ほとんどすべてのデバイスに何らかの種類のClick-to-Call機能またはアプリが含まれているため、これは問題ではないことがわかりました。

私はこの問題に直面しましたが、使用例が少し異なります。強調表示されている番号は電話番号ではないため、特別なフォーマットは必要ありません。

たとえば、次のようなものがあるとします。

<div>The current date/time: May 08 2017 10:44:58 GMT Daylight Time</div>

私*にとって、Edgeは08 2017 10電話番号リンクに変換されます。おかげで、エッジ！

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>

どちらの場合もハイライト表示されないため、これが電話番号で機能するかどうかはわかりません。スパンの位置を微調整する必要があるかもしれません。

ちなみに、これを実行できるという事実は、コマンドをWebページからターミナルにコピーしてはならない多くの理由の1つです。

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>

* Edgeの数値の強調表示は地域的なものだと思います。あなたのjsfiddleは私にはハイライトされていませんが、私はイギリスにいます。ここでは、0で始まる数値を強調表示しているようです。