ลบสไตล์หมายเลขโทรศัพท์ของ Microsoft Edge

Question 1

ฉันสังเกตเห็นว่าเบราว์เซอร์ Microsoft Edge ใหม่จะแทนที่รูปแบบของฉันเมื่อตรวจพบหมายเลขโทรศัพท์:

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

ดูjsfiddle นี้ (ต้องเปิดโดยใช้ Microsoft Edge: P)

ประเภทนี้บุกรุกในการออกแบบเว็บไซต์และค่อนข้างน่ารังเกียจ ดูเหมือนว่าเป็นลักษณะของผู้สืบทอดจาก IE: /

ฉันจะลบล้างหรือปิดใช้งานสิ่งนี้ได้อย่างไรเพื่อไม่ให้ผู้ใช้เว็บไซต์ของฉันเห็น

Question 2

คุณสามารถกำจัดมันได้โดยเพิ่มเมตาแท็กนี้ในส่วนหัวของหน้าเว็บของคุณ

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

เอกสารของ Microsoft เกี่ยวกับแท็กนี้

หวังว่าจะมีวิธีที่ดีกว่าในการปิดสิ่งนี้ทั่วโลกโดยไม่ทำให้หน้าบวม ... หรือดีกว่า แต่ปิดใช้งานคุณลักษณะนี้โดยค่าเริ่มต้น

Question 3

หากคุณไม่ต้องการปิดใช้งานสำหรับทั้งหน้าตามคำตอบที่เลือกแนะนำคุณสามารถเพิ่มแอตทริบิวต์ต่อไปนี้ลงในแท็กเฉพาะได้

<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

Question 4

คำตอบข้างต้นทำงานได้อย่างสมบูรณ์ แต่ปิดใช้งานความสามารถในการคลิกเพื่อโทรเข้าหมายเลขโทรศัพท์ (ซึ่งเป็นปัญหาสำคัญหากคุณกำลังสร้างไซต์ที่ตอบสนอง) ฉันพบวิธีแก้ไขที่ดีกว่าในการทำให้หมายเลขโทรศัพท์เป็นลิงค์ ตัวอย่าง:

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

จากนั้นจะช่วยให้คุณสามารถจัดรูปแบบ "ลิงก์" ตามที่คุณต้องการและสไตล์ "a" ใน CSS ของคุณจะแทนที่สไตล์ Edge และ iPhone บนหมายเลขโทรศัพท์ ปัญหาเดียวของเรื่องนี้คือทำให้หมายเลขโทรศัพท์เป็นลิงก์สำหรับอุปกรณ์ทั้งหมด แต่ฉันพบว่าสิ่งนี้ไม่เป็นปัญหาเนื่องจากอุปกรณ์เกือบทุกชนิดมีคุณลักษณะหรือแอปคลิกเพื่อโทร

Question 5

ฉันประสบปัญหานี้ แต่มีกรณีการใช้งานที่แตกต่างกันเล็กน้อย: หมายเลขที่ไฮไลต์ไม่ใช่หมายเลขโทรศัพท์ดังนั้นฉันจึงไม่ต้องการการจัดรูปแบบพิเศษใด ๆ

ตัวอย่างเช่นคุณอาจมีบางอย่างเช่น:

<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>

ขยายข้อมูลโค้ด

ฉันไม่เห็นว่ามันใช้ได้กับหมายเลขโทรศัพท์ของคุณหรือไม่เพราะฉันไม่เห็นการไฮไลต์ในทั้งสองกรณี คุณอาจต้องเขยิบตำแหน่งของช่วง

อนึ่งความจริงที่ว่าคุณสามารถทำได้เป็นหนึ่งในหลาย ๆ เหตุผลที่คุณไม่ควรคัดลอกคำสั่งจากหน้าเว็บและลงในเทอร์มินัลของคุณ:

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