Unwanted border around the image map area

I am using an Image map with a circular area. The problem is I get an unwanted border around the area in IE7. This border doesn't appear in FF and Chrome and also in IE8/IE9.

I tried adding border="0" to the image, css properties for the anchors i.e

a{ 
border:none !important;
outline:none !important;
}

but didn't work.

I also tried adding the IE fix onfocus="blur();" in the tag. This solved the issue in IE but then FF got the border now. Searched a lot and came through this fix which said it will fix the issue for FF when IE fix is used.

#parent_div *:active, #parent_div *:focus { overflow-x:hidden; outline:none; }

But sadly even this didn't work. I am using FF 9.0.1.

Any help will be greatly appreciated. Thanks in advance.

标签： html css image maps

4条回答

再贱就再见

2楼-- · 2019-06-22 14:55

Well found a way to solve this issue...which is probably not a good way to go for. By using js browser detection we can apply the IE fix as follows which will not cause problems to other browsers(FF in my case)

if (navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
    document.getElementsByTagName('area')[0].onfocus = function () {this.blur();};
   }

Well please, if anyone finds a better solution then do post here. Thanks.

0人赞添加讨论(0) 举报

Animai°情兽

3楼-- · 2019-06-22 14:58

img{border:none;}

and this is the fix for ie versions

<!--[if lte IE 6]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{

   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var i=0; i<document.images.length; i++)

      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""

            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle

            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML

            i = i-1
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

try this hope it helps !!!

0人赞添加讨论(0) 举报

别忘想泡老子

4楼-- · 2019-06-22 14:58

You could use conditional comments (more info here) + jQuery.

HTML:

<!-- 
    "old-ie" targets IE7 or less
    "ie8" targets IE8
    "ie" targets IE8+
-->

<!--[if lt IE 8]> <html lang="en" class="old-ie"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="ie ie8"> <![endif]-->
<!--[if gt IE 8]> <html lang="en" class="ie"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<head>
...
</head>

<body>
    <a href="#link">
        <img src="/img/image.jpg" />
    </a>
</body>

</html>

jQuery:

// we first check if current browser is IE7 or older, than apply our "hack"

if (jQuery('html').is('.old-ie') === true) {
    jQuery('a').focus(function() { jQuery(this).blur(); });
}

0人赞添加讨论(0) 举报

Juvenile、少年°

5楼-- · 2019-06-22 15:05

This is the solution:

onclick="blur()" onfocus="navigator.appName == 'Microsoft Internet Explorer' ? blur() : null"

0人赞添加讨论(0) 举报

Unwanted border around the image map area

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间