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

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

在IE中使用带有css“缩放”属性的“区域”的'alt'和'title'标签

1 个答案: