如何阻止Safari将网站图片识别为Live Text？

我在搭建一个存放自己撰写的古董钟表维修旧指南的小型网站，用的是带图片映射（Image Map）的旧版架构，现在碰到个麻烦：Safari的Live Text会识别图片里的文字，直接把网站功能搞坏了。

找到的代码片段写法有问题，正确的处理方式和代码放置位置如下：

错误写法的问题点 #

原来的代码把CSS属性直接塞在img标签里，不符合HTML语法，浏览器识别不了，所以会出错。

正确的两种实现方式 #

方式1：内联样式（直接写在img标签里）

把原来的img标签改成下面这样，用style属性包裹CSS规则：

<img src="image.jpg" width="640" height="480" border="0" usemap="#Map" style="-webkit-user-select: none !important; cursor: default;">

map标签的位置不变，放在img标签之后、</body>标签之前就行：

<map name="Map" id="Map">
  <area shape="rect" coords="51,81,565,159" href="https://www.vintageclocksinfo.com" />
</map>

方式2：统一CSS样式（更适合多图片的情况）

如果网站里有多个带图片映射的图片，推荐在页面的<head>标签里加个<style>块，一次性给所有带usemap属性的图片设置规则：

<head>
  <!-- 其他头部内容 -->
  <style>
    img[usemap] {
      -webkit-user-select: none !important;
      cursor: default;
    }
  </style>
</head>

这种情况下，你的img和map标签保持原来的位置即可，不用给每个img加内联样式。

内容的提问来源于stack exchange，提问作者Luke Gallacher