iOS Chrome自动为手机号、邮箱添加下划线并设为可点击的问题求助

核心原因 #

iOS Chrome基于WebKit内核，会自动扫描页面文本识别手机号、邮箱，生成隐形的<a>标签（href为tel:或mailto:开头），直接给父元素设置text-decoration: none!important无法覆盖自动生成的<a>标签样式。

解决方案 #

• 全局禁用自动识别（推荐）
  在HTML的<head>中添加meta标签，直接关闭浏览器的电话和邮箱自动检测功能：

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

  此方法简单彻底，适合不需要自动链接手机号/邮箱的场景。

• 精准覆盖自动生成链接的样式
  如果需要保留部分自动识别功能，可通过属性选择器定位浏览器自动生成的链接，强制覆盖样式：

  /* 禁止长按链接弹出菜单（可选） */
  * {
    -webkit-touch-callout: none;
  }
  
  /* 针对自动生成的电话/邮箱链接覆盖样式 */
  a[href^="tel:"], a[href^="mailto:"] {
    text-decoration: none !important;
    color: inherit !important; /* 继承父元素颜色，避免链接默认蓝色 */
  }
  

• Hack式拆分文本（不推荐）
  若前两种方法无效，可通过拆分文本让浏览器无法识别，比如用<span>分隔或插入零宽空格：

  <!-- 用span拆分手机号 -->
  <div>138<span>0013</span>8000</div>
  
  <!-- 插入零宽空格（&#8203;） -->
  <div>138&#8203;0013&#8203;8000</div>
  

内容的提问来源于stack exchange，提问作者Saran Kumar