web-dev-qa-db-ja.com

Microsoft Edgeの電話番号スタイルを削除する

電話番号を検出すると、新しいMicrosoft Edgeブラウザーが私のスタイルをオーバーライドすることに気付きました。

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

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

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

Webサイトのユーザーに表示されないように、これをオーバーライドまたは無効にするにはどうすればよいですか？

htmlcssmicrosoft-edge
80
karns

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

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

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

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

139
scunliffe

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

<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

48
maguy

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

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

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

29
cameron

私はこの問題に直面しましたが、使用ケースが少し異なります。強調表示されている番号は電話番号ではないため、特別な書式設定は必要ありません。

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

<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で始まる数字を強調しているようです。

2
Jools