Question

当我在下面的图像地图中的元素之间切换时，我发现我的焦点矩形没有显示在IE9中。标签仍然可以正常工作，焦点在Chrome中显示正常。

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

请帮忙。感谢。

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

IE9中的区域标签上没有焦点矩形

1 个答案: