Edgeで電話番号リンクを無効にしたい（PC表示時）

Question

Wordpressでサイト作成をしています。
モバイル端末のときだけ、電話番号リンクを有効にしようとしているのですが、Edgeに関してうまくいきません。
Chrome、Firefoxは大丈夫です。

以下、functions.phpです。

// 電話番号リンクPC外す
function my_wp_head_tel_link(){ 
if(!wp_is_mobile()): ?>
<style type="text/css">
/* PCで電話番号リンクを無効に */
a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: #000000;
}
a[href*="tel:"]:hover {
    color: #000000;
}
</style>
<?php endif;
}
add_action('wp_head', 'my_wp_head_tel_link');

電話番号：<a href="tel:[phone]">123-456-7890</a>

上記のコードで、Chrome、Firefoxは見た目もマウスホバーも、ただのテキスト状態の見え方になり、クリックしても無反応で、思った振る舞いになります。
Edgeもこれでうまくいったと一瞬思ったのですが（見た目もマウスホバーもただのテキストです）、クリックすると、PCでも電話番号リンクが立ち上がってしまいます。
この回避策をご存知の方がいらしたら、教えていただけると助かります。

Answer 1

どうやらEdgeのバグ（仕様？）みたいですね
inline要素にはpointer-eventsが有効ではないようです
とりあえずinline-blockにでもしておいてください

<style>
a[href="http://example.com/1"] {
  display:inline-block;
  pointer-events: none;
}
a[href="http://example.com/2"] {
  pointer-events: none;
}
</style>
<ul>
  <li><a href="http://example.com/1">example.com - 1</a></li>
  <li><a href="http://example.com/2">example.com - 2</a></li>
</ul>

Comments

[yukiko]

できました！！
a[href*="tel:"] {
display:inline-block;
pointer-events: none;
cursor: default;
text-decoration: none;
color: #000000;
}
これで、Edgeでもうまくいきました。大変助かりました。
どうやったら、display:inline-block;を付けたら解決する…ということに気づけるのでしょうか？

[yambejp]

正直pointer-eventsの仕様は理解していなかったのですが
まず「MDN pointer-events」でググって、同要素が
IEやedgeで有効なのを確認した上で

「pointer-events edge」でググるとそれっぽいところが
ヒットするのでそれを単に受け売りしました