blocks|key|858618|text|老把戏<area+onfocus="blur();+(...)+/>"祝你好运；|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|858619|entityMap^0|3|W|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Old trick <code>&lt;area onfocus="blur(); (...) /&gt;"</code>
Good luck;

blocks|key|1073352|text|我在IE9上也遇到了类似的问题，下面这个方法起作用了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1073353|#MyImageMap,+#MyImage+{
++++outline:+none;
}|code-block|syntax|javascript|1073354|这个想法的原始来源：“关于图像映射的一个注意事项是，您需要使用CSS禁用img、map和area标记上的边界。”http://forums.macrumors.com/showthread.php?t=1342928|offset|length|1073355|(该区域是地图的子级)|1073356|entityMap|0|LINK|mutability|MUTABLE|url|http://forums.macrumors.com/showthread.php?t=1342928^0|0|0|1K|1G|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

I had a similar problem on IE9 and this worked:

<pre><code>#MyImageMap, #MyImage {
 outline: none;
}
</code></pre>

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." <a href="http://forums.macrumors.com/showthread.php?t=1342928" rel="noreferrer">http://forums.macrumors.com/showthread.php?t=1342928</a>

(the area is a child of the map)

blocks|key|1073296|text|在<IMG>标签中添加|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1073297|hidefocus="true"|1073298|entityMap^0|1|5|0|0|G|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

In the <code>&lt;IMG&gt;</code> tag add 

<code>hidefocus="true"</code>

blocks|key|858710|text|试试这个，它对我很有效;)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858711|a{
+++outline:none+!important;
+++border:+none+!important;
}|code-block|syntax|javascript|858712|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this, it worked for me ;)

<pre><code>a{
 outline:none !important;
 border: none !important;
}
</code></pre>

blocks|key|1073370|text|这会在IE上修复它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1073371|img+{
++outline:none;
}|code-block|syntax|javascript|1073372|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This fixes it on IE

<pre><code>img {
 outline:none;
}
</code></pre>

blocks|key|858833|text|使用基于@boru解决方案的jquery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858834|++++$("area").focus(function(){
++++++++$(this).blur();
++++})|code-block|syntax|javascript|858835|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Using jquery based on @boru solution:

<pre><code> $("area").focus(function(){
 $(this).blur();
 })
</code></pre>

blocks|key|858495|text|你有没有试过添加属性"border:+none+!important“？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858496|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Have you tried adding the attribute "border: none !important" ?

blocks|key|858694|text|我刚刚在Firefox4中找到了一个去掉这个边框的补丁，因为.blur似乎不能修复它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858695|#someWrappingElement+*:active+{+overflow-x:hidden+}|code-block|syntax|javascript|858696|如果你没有指定它所在的div或元素，它可能会对你的页面造成很大的破坏，并导致在按住鼠标的同时被点击的东西消失。与.blur()一起使用来修复火狐和chrome。|858697|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

just found a fix to get rid of that border in firefox 4 as the .blur does not seem to fix it.

<pre><code>#someWrappingElement *:active { overflow-x:hidden }
</code></pre>

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.

blocks|key|858536|text|我在OS上的Chrome+(v8.0.552.224)上也遇到了同样的情况。我刚刚重启了Chrome，并在我的Mac上进行了自动升级，以使它开始出现，所以一定是在新版本中有一些东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858537|虽然我已经注意到，轮廓的颜色可以通过改变图像的"+outline+-color“属性来改变，但即使"outline”设置为"none“，也无法完全隐藏它。|858538|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

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

blocks|key|858585|text|我刚刚遇到了一个类似的问题。我无法摆脱轮廓，但可以通过将div的color属性设置为背景色来有效地隐藏它。但是我有一些单色的区域。如果我将颜色设置为透明，它会变成黑色。不过，这应该是解决问题的正确途径。我在这里看到的美国地图上使用了它：map|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|858586|entityMap|0|LINK|mutability|MUTABLE|url|http://mlbclientreview.com/map/^0|3A|3|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I just faced a similar problem. I couldn't get rid of the outline but was able to effectively hide it by setting the color property of the div to the background color. But I had areas of flat color. If I set color to transparent it came out black. That should be the right track to figure out a fix, though. I used it on a US map seen here: <a href="http://mlbclientreview.com/map/" rel="nofollow">map</a>

blocks|key|858910|text|这是一个非常古老的问题，但我找到了另一个可能对他人有帮助的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|858911|我使用React包react-+Google+-maps来显示我的Google+Maps实例和标记，并使用以下CSS覆盖用户代理样式来解决此问题。|858912|:focus+{
++outline:+none+!important;
}|code-block|syntax|javascript|858913|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

A really old question, but I found another solution that might help others.
I'm using the React package react-google-maps to show my Google Maps instance and markers
and used the following CSS to overwrite the user agent styles to fix this problem.
<pre><code>:focus {
 outline: none !important;
}
</code></pre>

I have this image map

<a href="http://corfro.com/projects/charlie-faye-tour-map/">http://corfro.com/projects/charlie-faye-tour-map/</a>

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)

I've tried the following but to no avail.

<pre><code>a{outline:none;}
map &gt; area,
map &gt; area:active,
map &gt; area:focus {outline: none; border:0; }
</code></pre>

Do you guys have any suggestions? Any help is much appreciated as this is driving me crazy!

How do I get rid of this border outline for my image map areas when clicked (OS X Chrome Only)

我有这个图像地图当你点击不同的城市时，一个黑色的边框会出现在该区域，但只发生在Chrome中。(你可能需要在不同的城市点击几次，但边框会出现-一旦巴士到达城市，边框就会开始显示)我试过以下几种方法，但都没有用。a{outline:none;}map > area,map > area:active,map > area:focus {outline: none; border:0; }你们有什么建

问如何在单击时摆脱图像地图区域的边框轮廓(仅限OS X Chrome )
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击时摆脱图像地图区域的边框轮廓(仅限OS X Chrome )EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击时摆脱图像地图区域的边框轮廓(仅限OS X Chrome )
EN