删除图像地图区域上的轮廓答案

【问题标题】：Removing outline on image map area删除图像地图区域上的轮廓
【发布时间】：2011-01-27 20:52:37
【问题描述】：

当您在图像地图上选择一个区域时，是否可以删除轮廓？看：

我在 Snow Leopard 上使用 Chrome。

【问题讨论】：

标签： html

【解决方案1】：

您似乎只需在img 标签上设置hidefocus 属性和outline css 属性，就像这样：

HTML

<img class="map" src="..." usemap="..." hidefocus="true" />

CSS

img.map, map area{
    outline: none;
}

这应该可以跨浏览器工作！

编辑

就像 Sergey K 评论的那样，如果您不希望支持 IE6，您可以通过使用属性选择器来节省字节。

img[usemap], map area{
    outline: none;
}

【讨论】：

对于 Chrome，我还发现我必须添加这个 CSS 规则：map area { outline: none; }。此外，作为一个想法，您可以将第二个选择器重写为：img[usemap] { outline: none; }，而不是必须向所有使用图像映射的图像添加 map 类。这将选择所有具有usemap 属性的图像。
已编辑答案引用您。谢谢！
有什么方法可以让它在带有纯 CSS 的 IE 中工作，即没有 hidefocus="true" 部分？尝试到 IE11，到目前为止没有运气。
我猜不是...你没有访问源代码的权限吗？ Javascript？
当然，'hidefocus' 在 HTML5 中是无效属性。

【解决方案2】：

我在 chrome 和 safari 上都遇到了同样的问题，并通过为每个区域标签分配一个类 .map 并为该类赋予以下样式来获得成功：

.map {
outline: 0;
}

【讨论】：

【解决方案3】：

有点老式，但是这行得通吗：

    <area onfocus="blur();" ...

?

GTX、CS

【讨论】：

【解决方案4】：

给你的图像地图一个“地图”的 id，然后使用下面的 CSS 声明：

#Map area {
    outline: none;
}

【讨论】：

【解决方案5】：

因此，如果您有一个没有 css 的古老网页（我知道这很糟糕！），您可以通过插入来修复它 style="outline:none" 在坐标之后和区域标签内的 href 之前 - 绝对完美！

【讨论】：

【解决方案6】：

使用 CSS。在元素上设置style="outline:none;"，或者最好将其放在样式表中。

【讨论】：

【解决方案7】：

在其 css 规则上尝试过 outline:0 吗？

【讨论】：