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

95

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

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

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

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

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

html css microsoft-edge

— Karns
소스

나는이가되지 희망 실제로 ... 악성 코드에 의해 발생

— karns

검사 추가 기능 (에지가없는), 그러나 몇 가지 추가 기능 원인이 IE-S의 행동 ...

— sinisake

7

나는 오늘 트위터에서 이것에 대해 언급했다 : mobile.twitter.com/scunliffe/status/631484565492625409 적어도 지금까지 내가 볼 수있는 한 마이크로 소프트가이 불쌍한 결정을 되돌릴 때까지 <meta name="format-detection" content="telephone=no"/>제거해야 할 모든 페이지 에 추가해야 할 것이다 이의. :-(

— scunliffe

1

또한 145.1231321과 같은 위도 / 경도 숫자에도 적용됩니다

— behelit

1

또한 강조 표시되는 숫자 형식은 사용자 PC의 지역 설정 ( "홈 위치")에 따라 다르므로 모든 사용자에게 다르게 영향을 미칩니다! 이 방법은 당신이 당신의 페이지를 테스트 할 때 최종 사용자는 실제로 같은 브라우저를 사용에도 불구하고 뭔가 다른 표시 될 수 있습니다 docs.microsoft.com/en-us/previous-versions/windows/...

— SharpC

171

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

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

이 태그에 대한 Microsoft의 설명서입니다 .

페이지가 커지지 않고 전역 적으로이 기능을 해제하는 더 좋은 방법이 있기를 바랍니다. 또는 기본적으로이 기능을 비활성화하는 것이 좋습니다.

— Scunliffe
소스

좋은 대답입니다! 이에 관한 문서 링크를 추가해 주시겠습니까?

— karns 2013-08-13

9

멍청한 디자인. 누군가 그렇게하고 싶다면. 때때로 당신의 웹 애플리케이션이 할 수 있도록 할 필요가 없기 때문에 적어도, 당신은 그것을 선택하고 같은 속성 "감지 전화 = true"로 허용 할 수있는 자신이 너무 구성하지 않을 경우 ...

— 미구엘

59

선택한 답변에서 알 수 있듯이 전체 페이지를 비활성화하지 않으려면 특정 태그에 다음 속성을 추가 할 수 있습니다.

<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

— 마가이
소스

9

나는 이것이 약간 오래된 대답이라는 것을 알고 있지만 이것을 찾는 사람에게는 이것을 부모 태그에 추가해야했습니다 (예 : 레이블에서 한 단계 올라간 <div> 또는 전화를 표시하는 데 사용하는 모든 것 번호).

— Dortimer

답변과 Debasertron의 의견 모두에 +1. 더 나아가, 그것은 블록 수준의 부모가 될 필요가있는 것 같습니다. 나는 작동하지 않는 범위로 시도했지만 div는 괜찮 았습니다.

— Masala

31

위의 답변은 완벽하게 작동하지만 클릭 투 콜 전화 번호 기능을 비활성화합니다 (반응 형 사이트를 구축하는 경우 주요 문제임). 전화 번호를 링크로 만드는 더 나은 방법을 찾았습니다. 예:

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

그러면 원하는대로 "링크"스타일을 지정할 수 있으며 CSS의 "a"스타일이 전화 번호의 Edge 및 iPhone 스타일을 재정의합니다. 이것의 유일한 문제는 전화 번호를 모든 장치에 대한 링크로 만드는 것이지만 거의 모든 장치에 일종의 클릭 투 콜 기능이나 앱이 포함되어 있으므로 문제가되지 않는 것으로 나타났습니다.

— 카메론
소스

1

내 눈에 최고의 접근!

— conceptdeluxe

질문은 "비활성화하는 방법"이지만 휴대 전화 사용을 염두에두고 반응 형 사이트를 만들려는 경우 더 나은 응답이 될 것이라는 데 동의해야합니다.

— JStevens

3

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

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

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

— Jools
소스