本文转载于:猿2048网站使用Map标签指定点击区域时的兼容性问题
电商m站的首页，有一个需求是配一张大的banner图，然后指定某些区域是热区，点击之后跳转到不同的活动页。
听起来简单明了，实现也比较容易，立刻就想起来有个map标签，简直就是为这个需求量身定做。
简单说下做法：
我们首先会和后台约定一些规则，定义一个json对象。比如：
{
type: 1,
width: 100,
height: 100,
clickArea: [
{
shape: 'circle',
coords: '10,10,10',
href: '//jd.com'
},
{
shape: 'rect',
coords: '10,10,10,10',
href: '//m.jd.com'
}
],
img: '一张图片.jpg'
}我们可以约定，type为1就是map标签。之后按照我们约定的解析规则，把页面渲染上去就好了。
当然，实际上不会这么简单，一般来说，我们的首页和活动页是三端同步的。Android和iOS就不能直接使用上面的例子，还需要做一定的修改，但是大同小异。
这次出问题的地方就在这个map标签。
我们使用了模板来渲染页面，之后出来的元素大概是这样。
在chrome中可以正常点击，一旦到了其他浏览器，诸如FireFox，则无法点击。
同事问到我这个问题的时候，我真是觉得十分有趣，当时一起寻找是哪里的问题。
中间想了很多种可能，思路一直停留在动态计算影响了map的使用等。但是一直不能复现，后来仔细观察之后才发现，原来是img标签在书写的过程中，漏掉了usemap里的#。
咳咳咳……
在chrome中好使，是因为chrome帮我们做了兼容。
把这个bug记录下来，也算是长长记性。
PS：
后来我查了一下，之所以同事会出这个问题，也是因为map标签用的较少，而常用的label标签中的for属性，是不需要加#的，加上了反而会有错。
当然，label和map中的用法也不同，不论如何，引以为戒。
PPS：
下一篇写现在工作中用到的首页活动页布局方案。
PPPS：
520快乐！
本文转载于:猿2048➵https://www.mk2048.com/blog/blog.php?id=h02hkjhj&title=%E4%BD%BF%E7%94%A8Map%E6%A0%87%E7%AD%BE%E6%8C%87%E5%AE%9A%E7%82%B9%E5%87%BB%E5%8C%BA%E5%9F%9F%E6%97%B6%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98