Xóa kiểu số điện thoại của Microsoft Edge

Tôi nhận thấy rằng trình duyệt Microsoft Edge mới sẽ ghi đè các kiểu của tôi khi nó phát hiện số điện thoại:

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

Xem jsfiddle này (phải được mở bằng Microsoft Edge: P).

Loại này xâm nhập vào thiết kế của trang web, và khá đáng ghét. Chắc chắn có vẻ như là một đặc điểm của người kế nhiệm IE: /

Làm cách nào để ghi đè hoặc tắt tính năng này để người dùng trang web của tôi không nhìn thấy nó?

Bạn có thể loại bỏ nó bằng cách thêm thẻ meta này vào tiêu đề các trang của bạn.

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

Tài liệu của Microsoft về thẻ này .

Hy vọng rằng sẽ có một cách tốt hơn để tắt tính năng này trên toàn cầu mà không làm đầy các trang ... Hoặc tốt hơn là tắt tính năng này theo mặc định.

Nếu bạn không muốn tắt toàn bộ trang như câu trả lời đã chọn đề xuất, bạn có thể thêm thuộc tính sau vào một thẻ cụ thể

<p x-ms-format-detection="none">

Tham khảo: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265018(v=vs.85)#controlling-phone-number-detection

Câu trả lời trên hoạt động hoàn hảo, nhưng vô hiệu hóa khả năng có số điện thoại nhấp để gọi (đây là một vấn đề lớn nếu bạn đang xây dựng một trang web đáp ứng). Tôi đã tìm thấy một công việc tốt hơn để tạo liên kết số điện thoại. Thí dụ:

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

Sau đó, điều này sẽ cho phép bạn tạo kiểu "liên kết" theo cách bạn muốn và các kiểu "a" trong CSS của bạn sẽ ghi đè kiểu Edge và iPhone trên số điện thoại. Vấn đề duy nhất với điều này là nó làm cho số điện thoại trở thành một liên kết cho tất cả các thiết bị, nhưng tôi thấy đây không phải là vấn đề vì hầu hết mọi thiết bị đều có một số tính năng hoặc ứng dụng nhấp để gọi.

Tôi đã gặp phải vấn đề này, nhưng với một trường hợp sử dụng hơi khác: Số mà nó đánh dấu không phải là số điện thoại, vì vậy tôi không muốn có bất kỳ định dạng đặc biệt nào.

Ví dụ, bạn có thể có một cái gì đó như:

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

Đối với tôi *, Edge sẽ chuyển đổi 08 2017 10thành liên kết số điện thoại. Cảm ơn, Edge!

Tôi thấy rằng bạn có thể giải quyết vấn đề này bằng cách chèn inline-blockphần tử vô hình vào giữa chuỗi:

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

Tôi không thể biết liệu điều này có phù hợp với số điện thoại của bạn hay không vì tôi không thấy đánh dấu trong cả hai trường hợp. Bạn có thể cần phải di chuyển vị trí của nhịp.

Ngẫu nhiên, thực tế là bạn có thể làm điều này là một trong nhiều lý do bạn không nên sao chép lệnh khỏi các trang web và vào thiết bị đầu cuối của mình:

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>

* Tôi nghĩ điểm nổi bật của Edge về các con số là khu vực. Jsfiddle của bạn không được đánh dấu đối với tôi, nhưng tôi đang ở Vương quốc Anh. Đây dường như là để làm nổi bật các số bắt đầu bằng 0.