電商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標籤。

我們使用了模板來渲染頁面，之後出來的元素大概是這樣。

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>

資源網站大全 https://55wd.com 設計導航https://www.wode007.com/favorites/sjdh

在chrome中可以正常點選，一旦到了其他瀏覽器，諸如FireFox，則無法點選。
同事問到我這個問題的時候，我真是覺得十分有趣，當時一起尋找是哪裡的問題。
中間想了很多種可能，思路一直停留在動態計算影響了map的使用等。但是一直不能復現，後來仔細觀察之後才發現，原來是img標籤在書寫的過程中，漏掉了usemap裡的#。

咳咳咳……
在chrome中好使，是因為chrome幫我們做了相容。

把這個bug記錄下來，也算是長長記性。

PS：
後來我查了一下，之所以同事會出這個問題，也是因為map標籤用的較少，而常用的label標籤中的for屬性，是不需要加#的，加上了反而會有錯。