[html] Microsoft Edge의 전화 번호 스타일 제거

새 Microsoft Edge 브라우저가 전화 번호를 감지하면 내 스타일을 재정의하는 것으로 나타났습니다.

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

이 jsfiddle을 참조하십시오 (Microsoft Edge : P를 사용하여 열어야 함).

이런 종류의 웹 사이트 디자인을 침범하고 다소 불쾌합니다. 확실히 IE의 후계자의 특성처럼 보입니다 : /

내 웹 사이트 사용자가 볼 수 없도록이를 무시하거나 비활성화하려면 어떻게해야합니까?



답변

페이지 헤더에이 메타 태그를 추가하여 제거 할 수 있습니다.

<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 스타일을 재정의합니다. 이것의 유일한 문제는 전화 번호를 모든 장치에 대한 링크로 만드는 것이지만 거의 모든 장치에 일종의 클릭 투 콜 기능이나 앱이 포함되어 있으므로 문제가되지 않는 것으로 나타났습니다.


답변

이 문제에 직면했지만 약간 다른 사용 사례가 있습니다. 강조 표시하는 번호가 전화 번호가 아니므로 특별한 서식을 원하지 않습니다.

예를 들어 다음과 같은 것이있을 수 있습니다.

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

나를 위해 * Edge는 08 2017 10전화 번호 링크 로 변환 됩니다. 고마워, Edge!

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으로 시작하는 숫자를 강조하는 것 같습니다.


답변