使用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標籤。
咱們使用了模板來渲染頁面，以後出來的元素大概是這樣。

<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>

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

咳咳咳……
在chrome中好使，是由於chrome幫咱們作了兼容。

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

PS：
後來我查了一下，之因此同事會出這個問題，也是由於map標籤用的較少，而經常使用的label標籤中的for屬性，是不須要加#的，加上了反而會有錯。
固然，label和map中的用法也不一樣，不論如何，引覺得戒。
PPS：
下一篇寫如今工做中用到的首頁活動頁佈局方案。
PPPS：
520快樂！