2012-01-27 37 views
5

Tôi đang sử dụng Bản đồ hình ảnh có khu vực hình tròn. Vấn đề là tôi nhận được một biên giới không mong muốn xung quanh khu vực trong IE7. Đường viền này không xuất hiện trong FF và Chrome cũng như trong IE8/IE9.Đường viền không mong muốn xung quanh khu vực bản đồ hình ảnh

Tôi đã thử thêm border = "0" đến hình ảnh, tính css cho neo tức là

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

nhưng đã không làm việc.

Tôi cũng đã thử thêm bản sửa lỗi IE onfocus = "blur();" trong thẻ. Điều này giải quyết vấn đề trong IE nhưng sau đó FF đã có biên giới bây giờ. Đã tìm kiếm rất nhiều và đã khắc phục sự cố này cho biết nó sẽ khắc phục sự cố cho FF khi sửa lỗi IE được sử dụng.

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

Nhưng đáng buồn là ngay cả điều này cũng không hiệu quả. Tôi đang sử dụng FF 9.0.1.

Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn trước.

+0

866 đại diện và 0% được chấp nhận câu trả lời ?! bạn đã tìm thấy giải pháp chưa? –

+0

vâng ... coz không có giải pháp nào cả. Kiểm tra tất cả các câu trả lời cho cách giải quyết. – Abhidev

Trả lời

3
img{border:none;} 

và đây là bản sửa lỗi cho các phiên bản ie

<!--[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]--> 

thử hy vọng này nó giúp !!!

+0

đã thử tính năng này ... không hoạt động đối với tôi trong trường hợp bản đồ hình ảnh có bản sửa lỗi trên IE. – Abhidev

+0

là tức là 6.0 ??? ok đặt kịch bản vào tiêu đề ... – Madhu

+0

Tôi nghĩ rằng kịch bản bạn đã đưa ra là để chỉnh sửa hình ảnh minh bạch Png trong IE6 và dưới đây, vấn đề tôi đang gặp phải liên quan đến việc sử dụng bản đồ Hình ảnh. – Abhidev

1

Cũng đã tìm ra cách để giải quyết vấn đề này ... có lẽ đây không phải là cách tốt để thực hiện. Bằng cách sử dụng js phát hiện trình duyệt chúng ta có thể áp dụng việc sửa chữa IE như sau đó sẽ không gây ra vấn đề cho các trình duyệt khác (FF trong trường hợp của tôi)

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

Vâng xin vui lòng, nếu có ai tìm thấy một giải pháp tốt hơn thì đừng trả lời ở đây. Cảm ơn.

+0

Abhidev, bạn có thể sử dụng bình luận có điều kiện để phát hiện xem IE có đang chạy hay không, thêm thông tin [tại đây] (http://www.quirksmode.org/css/condcom.html). Sẽ thêm một câu trả lời mới làm ví dụ. – bdurao

2

Bạn có thể sử dụng nhận xét có điều kiện (xem thêm thông tin 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

có chắc chắn chúng tôi có thể sử dụng bình luận có điều kiện. :) – Abhidev

3

Đây là giải pháp:

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

Tôi đã thử rất nhiều (đường viền, đường viền, ..) mọi thứ và chỉ làm việc này, cảm ơn –

Các vấn đề liên quan