Question

我的网站在其他浏览器上运行良好，而在互联网浏览时，它的图像在其外面出现黑框，内容也会失真。任何人都可以建议我解决这个兼容性问题。

www.natureconnect.in

请在不同的浏览器和IE网站上面打开以测试问题。

Banner logo css code

#maneWrap, #overflowFix{width:100%; height:100%; float:left;      position:relative; left:0%;} 
#overflowFix{overflow-x:hidden;} 
#hearderWrap{ position:fixed; width:100%; height:100px; text-align:center; float:left; background:#448f00; top:0px; left:0px; z-index:1000;}  
#logo{ margin:0 auto; margin-top:14px; cursor:pointer;} 
#social-icon{ position:absolute; top:0px; right:0px; height:100%;}
#social-icon a{position:relative; float:left; display:block; padding:40px 40px; border:1px solid #448f00; border-left-color:#66d700; border-top:0px; border-bottom:0px;} 
#slides{ width:100%; height:100%; float:left; clear:both;} 
#slides img{ width:100%;} 
#social-icon a span{position:absolute; width:100%; height:5px; left:0px; bottom:0px;} 
#social-icon a:hover{ border-color:#66d700; background:#4fa302;}        
#social-icon a:hover span{background:#66d700;} 
#maneWrap{margin-top:100px;}

banner logo html code

<div id="logo"><a href="index.html"><img src="images/logo.jpg" /></a></div>
                <div id="social-icon">
                    <a href="https://www.facebook.com/NatureConnectOutdoorsPvtLtd" target="_blank"><img src="images/facebook.png" alt="Facebook" /><span></span></a>
                    <a href="https://twitter.com/natureconnectin" target="_blank" class="twitter"><img src="images/twitter.png"  alt="Twitter"/><span></span></a>
                    <a href="http://pinterest.com/natureconnect/" target="_blank"><img src="images/Pinterest.png" alt="Pinterest" /><span></span></a>
                </div>

Answer 1

您已经为图像添加了超链接，您是否尝试过应用边框：0px用于图像？

Answer 2

我相信它是Internet Explorer围绕锚标记的默认边框。

<a> <img src="logo.png" /> </a>

尝试这样的事情：

a img{ border: 0; }

它使用锚标记从图像中删除所有边框。或这个： a .className{ border: 0; }

使用锚标记和类名className删除图像中的所有边框。

此问题在Stackoverflow上也被问到here

Stackoverflow上的here

Internet Explorer兼容性问题

2 个答案: