IE9 区域标签上没有焦点矩形答案

【问题标题】：No focus rectangle on area tag in IE9IE9 区域标签上没有焦点矩形
【发布时间】：2011-09-14 13:09:07
【问题描述】：

当我在下面的图像映射中的元素之间切换时，我发现我的焦点矩形没有显示在 IE9 中。选项卡仍然可以正常工作，并且焦点在 Chrome 中显示为 OK。

<img name="scr5diagram" src="scr5-diagram.gif" width="909" height="600" id="scr5diagram" usemap="#m_scr5diagram" alt="Interactive diagram showing areas of focus" />
<map name="m_scr5diagram" id="m_scr5diagram">
    <area href="#" class="fader" id="s5b1" shape="poly" coords="35,32,157,32,159,33,160,35,160,125,159,127,157,128,35,128,33,127,32,125,32,35,33,33,35,32,35,32" alt="" />
    <area href="#" class="fader" id="s5b2" shape="poly" coords="259,32,381,32,383,33,384,35,384,125,383,127,381,128,259,128,257,127,256,125,256,35,257,33,259,32,259,32" alt="" />
    <area href="#" class="fader" id="s5b3" shape="poly" coords="483,32,605,32,607,33,608,35,608,125,607,127,605,128,483,128,481,127,480,125,480,35,481,33,483,32,483,32" alt="" />
</map>

请帮忙。谢谢。

【问题讨论】：

标签： focus accessibility internet-explorer-9 imagemap area

【解决方案1】：

根据HTML Spec：

第一个 x 和 y 坐标对和最后一个应该相同才能闭合多边形。当这些坐标值不相同时，用户代理应该推断出一个额外的坐标对来闭合多边形。

尝试使用其他工具生成坐标。以下测试适用于 IE9：

<!doctype html>
<html lang="en">
<head>
    <title>Poly Rectangle Test</title>
</head>
<body>
<img id="stackoverflow" name="stackoverflow" src="http://www.stackoverflow.com/favicon.ico" width="32" height="32" usemap="#stackmap" alt="stackoverflow.com"/>
<map id="stackmap" name="stackmap">
    <area href="http://www.stackoverflow.com" shape="poly" coords="0,16,16,0" alt="Point one"/>
    <area href="http://www.stackoverflow.com" shape="poly" coords="16,16,16,0" alt="Point two"/>
    <area href="http://www.stackoverflow.com" shape="poly" coords="0,0,16,16" alt="Point three"/>
    <area href="http://www.stackoverflow.com" shape="poly" coords="0,16,16,16" alt="Point four"/>
</map>
</body>
</html>

【讨论】：