[html & ios] 전화번호가 들어있는 span태그로 감싼 텍스트인데 전화가 되고 css가 이상할때

상황

safari에서만 그냥 123-456-789 span 태그로 감싼 텍스트인데 누르면 전화기능이 되면서 컬러가 검정색으로 고정되어서 아무리 important를 줘도 안먹을때

 

원인

mac으로 연결해서 확인해보니 ios에서는 태그안에 전화번호가 있으면 전화로 인식하고 태그 자체를 a태그로 바꿔버림.
<a href="tel:123-456-789">123-456-789</a>

그리고 해당 페이지에 a태그 색상이 #000으로 고정이었음.

 

해결

<pre> 태그로 변경하거나 a 태그라고 생각하고 줘야함. 단 안드로이드에서는 span 태그로 그대로 나오니 참고!