在 IE 中使用带有 css 'zoom' 属性的 'area' 的 'alt' 和 'title' 标签

Question

在以下脚本中，area 标签定义为图像地图中心内的可点击区域。 alt 标记指定区域的文本，zoom 属性将放大级别控制为将原始图像缩小 50%：

<style type="text/css">
    #myimg {zoom:50%; -moz-transform:scale(50%); -webkit-transform:scale(50%);}
</style>

<img src="http://www.content.onemexico.net/rosa.jpg" id="myimg" width="640" height="640" usemap="#themap">
<map name="themap">
    <area shape="rect" coords="240,240,400,400" alt="RosesByAlt" title="RosesByTitle" href="#">
</map>

除了 Internet Explorer (IE-9) 之外的所有主要浏览器中都会显示可点击区域的描述文本。

我尝试了title 属性而不是alt，但仍然没有出现文本。

请任何人都可以帮助使用 Internet Explorer 使描述文本显示在具有缩放属性的可点击区域。

Answer 1

IE9 使用标准 CSS transform 属性。它需要一个前缀，但它确实支持它。因此，如果您只是想支持 IE9，则根本不需要zoom。你应该可以这样做：

#myimg {
    -ms-transform:scale(0.5);
    -o-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
}

如果您需要支持 IE8 或更早版本，那么您需要zoom 或类似的东西，但请注意zoom 与scale 不同；表面上它可能有一些相似之处，但它的作用却大不相同，如果你使用它，你会得到一些奇怪的效果。

所以我建议不要使用zoom，即使是旧的IE版本。最好使用 IE 的 matrix 过滤器或 polyfill 脚本将 transform 样式的支持反向移植到旧的 IE 中。 answers provided here may help you

另外请注意，我还添加了无前缀版本的属性：您应该始终提供所有属性的无前缀版本，即使目前还没有浏览器支持它，因为在未来的某个时间它们将全部放弃对其前缀版本的支持，此时如果您没有标准版本，您的代码将会中断。