Html 单击时如何摆脱图像地图区域的边框轮廓（仅限 OS X Chrome）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4351827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get rid of this border outline for my image map areas when clicked (OS X Chrome Only)
提问by Corfro
I have this image map
我有这张图片地图
http://corfro.com/projects/charlie-faye-tour-map/
http://corfro.com/projects/charlie-faye-tour-map/
And when you click on the different cities a black border shows up on the area but only happening in Chrome. (you might need to click a few times on different cities but the border will show up - once the bus arrives at the city the borders start showing up)
当您单击不同的城市时，该区域会出现黑色边框，但仅在 Chrome 中出现。（你可能需要在不同的城市点击几次，但边界会出现——一旦公共汽车到达城市，边界就会开始出现）
I've tried the following but to no avail.
我尝试了以下但无济于事。
a{outline:none;}
map > area,
map > area:active,
map > area:focus {outline: none; border:0; }
Do you guys have any suggestions? Any help is much appreciated as this is driving me crazy!
大家有什么建议吗？非常感谢任何帮助，因为这让我发疯了！
回答by boru
Old trick <area onfocus="blur(); (...) />"Good luck;
老把戏 <area onfocus="blur(); (...) />"祝你好运；
回答by Curtis Yallop
I had a similar problem on IE9 and this worked:
我在 IE9 上遇到了类似的问题，这很有效：
#MyImageMap, #MyImage {
outline: none;
}
Original source of the idea: "One note about image maps is that you'll want to disable the border on the img, map, and area tags using CSS." http://forums.macrumors.com/showthread.php?t=1342928
这个想法的原始来源：“关于图像地图的一个注意事项是，您需要使用 CSS 禁用 img、地图和区域标签上的边框。” http://forums.macrumors.com/showthread.php?t=1342928
(the area is a child of the map)
（该区域是地图的子项）
回答by roy.d
In the <IMG>tag add
在<IMG>标签中添加
hidefocus="true"
hidefocus="true"
回答by Peter Slivka
Try this, it worked for me ;)
试试这个，它对我有用;)
a{
outline:none !important;
border: none !important;
}
回答by jez
This fixes it on IE
这在 IE 上修复了它
img {
outline:none;
}
回答by John Prado
Using jquery based on @boru solution:
使用基于@boru 解决方案的jquery：
$("area").focus(function(){
$(this).blur();
})
回答by Kevin Ripka
just found a fix to get rid of that border in firefox 4 as the .blur does not seem to fix it.
刚刚找到了一个解决方法来摆脱 Firefox 4 中的边框，因为 .blur 似乎没有修复它。
#someWrappingElement *:active { overflow-x:hidden }
if you don't get specific to the div or element it's in it can reek havoc with your page and cause things clicked on to disappear while the mouse is held down. Use in conjuction with .blur() to fix for firefox and chrome.
如果您不特定于 div 或元素，它可能会对您的页面造成严重破坏，并导致在按住鼠标时点击的内容消失。与 .blur() 结合使用以修复 firefox 和 chrome。
回答by adam
- Go to sharePoint Designer and locate your page/image
- Highlight the image that has the randomized border
Find the following tags in the code:
<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor"></Content>Between them Add:
style="border:none"
- 转到 sharePoint Designer 并找到您的页面/图像
- 突出显示具有随机边框的图像
在代码中找到以下标签：
<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor"></Content>在它们之间添加：
style="border:none"
*may have to add them after the following: alt="" style="margin: 5px"
*可能必须在以下内容之后添加它们： alt="" style="margin: 5px"
回答by TWLATL
Have you tried adding the attribute "border: none !important" ?
您是否尝试过添加属性 "border: none !important" ？
回答by David Moss
I'm experiencing exactly the same thing with Chrome on OS X (v 8.0.552.224). I just restarted Chrome and got an automatic upgrade on my Mac for this to start appearing, so must be something in the new release.
我在 OS X (v 8.0.552.224) 上遇到了与 Chrome 完全相同的事情。我刚刚重新启动了 Chrome 并在我的 Mac 上进行了自动升级，以便开始出现，所以必须在新版本中有所体现。
I have noted though that the colour of the outline can be changed by altering the "outline-color" attribute of the image, but have been unable to hide it completely even though "outline" is set to "none".
我注意到虽然可以通过更改图像的“outline-color”属性来更改轮廓的颜色，但是即使“outline”设置为“none”也无法完全隐藏它。
