Image Map中area元素边框显示在图片外部的问题求助

直接给<area>元素设置border样式会出现边框偏移到图片外的情况，这是因为浏览器对<area>这个替换元素的样式渲染逻辑和普通元素不同，原生border的计算基于整个图片容器，而非映射区域的坐标。

最简单的解决方法：用outline替代border #

放弃直接设置border，改用outline属性配合负偏移，让边框贴合映射区域：

1. 移除<area>标签里的style="border:solid"
2. 添加以下CSS样式：

area:hover {
  /* 自定义边框样式，比如黑色实线 */
  outline: 2px solid #000;
  /* 负偏移让边框向内收缩，避免超出图片范围 */
  outline-offset: -2px;
}

修改后的完整代码 #

<div id="image_map">   
    <img src="https://i.sstatic.net/H6iMi.png" alt="image map example" width=500 height=332 usemap="#map_example">    
    <map name="map_example">        
        <area href="https://facebook.com" alt="Facebook" target="_blank" shape=poly coords="30,100, 140,50, 290,220, 180,280"> 
        <area href="https://en.wikipedia.org/wiki/Social_media" target="_blank" alt="Wikipedia Social Media Article" shape=poly coords="190,75, 200,60, 495,60, 495,165, 275,165">     
    </map>     
</div>

<style>
area:hover {
  outline: 2px solid #000;
  outline-offset: -2px;
}
</style>

原理说明 #

outline是围绕元素的轮廓线，不会改变元素布局，通过设置负的outline-offset，可以让轮廓向内收缩，刚好贴合<area>定义的映射区域，不会跑到图片外部。如果需要默认显示边框（非hover状态），直接给area标签设置outline和outline-offset即可。

内容的提问来源于stack exchange，提问作者ENERGY.SERVICES