logo标签列表

如何在IE 10中禁用图像周围的边框

htmlinternet-explorer-10css
7
如何在Internet Explorer 10中取消图像边框线以及a标记中的图像边框线？我尝试了以下方法：
 a {
outline : none;
text-decoration: none;
 }
 a img {
 border : 0;
outline : none;
 }
 img {
border : 0;
border-style: none;
 }

同时还有这个：

 <meta http-equiv="x-ua-compatible" content="IE=edge" />

还有这个：

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

什么都不起作用。我已经想尽了办法。有人能帮忙吗？

编辑：以下是我的html和css文件：

 <!doctype html>
 <html>
 <head>
    <meta charset="utf-8" />

<title> Title </title>
<link rel="stylesheet" href ="main.css" />
<link rel="stylesheet" href ="menu.css" />

 </head>

 <body>

 <div class = "page " align ="center">
    <div class="header">
                <img id="bannerimg">
                <img id="menubar">
    </div>

    <div class="menu">
        <table id="menubtns" border="0">
        <tr>
            <td><a href =""><img id="projekt"></a></td>
            <td><a href =""><img id="eshop"></a></td>
            <td><a href =""><img id="foto"></a></td>
            <td><a href =""><img id="video"></a></td>

        </tr>
        </table>
    </div>

    <div class= "content">
        <table id= "obsah" border="0">
        <tr>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
        </tr>   
        <tr>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
        </tr>       
        <tr>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
        </tr>
        <tr>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
        </tr>
        </table>
    </div>

    <div id= "partneri"></div>
    <div id= "footer">Copyright.</div>


 </div>     
 </body>
 </html>

主要CSS：

 body {
 background-image:url('img/bg_image.png');
 background-repeat:no-repeat;
 margin: 0;
 }
 a img
 {
 border: 0px;
 }

 .header #bannerimg
 {
 background-image:url('img/banner.png');
 width: 1040px;
 height: 594px;
 background-repeat:no-repeat;
 outline: none;
 }

 .content
 {
 margin-top: 80px;
 margin-right: 50px;
 font-family: "Verdana";
 font-size: 20px;
 position: relative;
 }

 .content #buybtn
 {
 background-image:url('img/kupit.png');
 height: 36px;
 width: 140px;
 }

 .content #obsah
 {
 border-spacing: 60px 30px;
 }

 #partneri
 {
 background-image:url('img/partneri.png');
 height: 142px;
 width: 1012px;
 }

 #footer {
 width: 992px;
 margin-top:5px; 
 padding:15px 0; 
 text-align:center; 
 font-size:12px; 
 font-family:arial; 
 color:#FFF; 
 background:#000; 

}

CSS菜单：

 .menu
 {
 margin-top: -110px;
 margin-right: 10px;
 z-index: 2;
 position: relative;
 }

 .header #menubar
 {
 background-image:url('img/menu1.png');
 height: 121px;
 width: 992px;
 position: relative;
 margin-top:-49px;
 margin-right: 20px;
 z-index: 1;
 }

 .menu #menubtns
 {
 border-spacing: 135px 5px;
 }

 .menu #projekt
 {
 background-image:url('img/projekt.png');
 height: 37px;
 width: 184px;
 }

 .menu #eshop
 {
 background-image:url('img/eshop.png');
 height: 37px;
 width: 100px;
 }

 .menu #foto
 {
 background-image:url('img/foto.png');
 height: 37px;
 width: 76px;
 }

 .menu #video
 {
 background-image:url('img/video.png');
 height: 37px;
 width: 92px;
 }

border / outline around my images

你能给我们展示一下链接吗？或者在JSFiddle上演示一下？ - StackExchange What The Heck
好的，请检查F12开发工具，以查看边框来自哪里。 - Šime Vidas
2
你需要发布一份能够真正展现问题的示例（HTML和CSS）。例如，设置a img { border: 0 }可以移除IE10和其他浏览器中链接图像周围的默认边框，因此还有其他问题存在。（而outline与边框无关，只是看起来像一个边框。） - Jukka K. Korpela
我已经添加了HTML + CSS文件+图像。 - Martin Nemeth
2个回答
12

只需设置边框：

a img{
    border: 0px;
}

它在IE10上可以使用。

嗨。请再看一下。我已经添加了HTML + CSS文件+图片。我尝试了你的解决方案，但是我的结果与图片上的一样。你能帮我吗？ - Martin Nemeth
@MartinNemeth 我认为你的问题与 CSS 代码中图片的寻址有关。因为浏览器无法加载元素背景图像，边框也不是图像的实际边框。这是因为图像没有加载。可能是图片不存在或寻址出现了问题。尝试通过在浏览器上右键单击并查看寻址来查看页面源代码。 - Siamak Motlagh
我试图将图片放在与我的HTML和CSS文件相同的目录中，但是不起作用。它在我的Opera 12.12上完美运行，即使我的图片在“img”文件夹中也可以正常工作。 - Martin Nemeth
@MartinNemeth 为什么你在代码中使用这样的元素 -> <img id="projekt">？这是一个没有 src 标签的图片。 - Siamak Motlagh
让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/37400/discussion-between-siamak-a-m-and-martin-nemeth - Siamak Motlagh
显示剩余2条评论
1
我遇到这个问题是因为图片是通过CSS的background-image属性指定的，而img元素没有src属性。将img标签的src属性设置为透明的png文件可以使它在IE 10中正常工作，就像在其他浏览器中一样。
function isIE() {   // https://dev59.com/1GMm5IYBdhLWcg3wDrpR#17907562    
    return ((navigator.appName == 'Microsoft Internet Explorer') || ((navigator.appName == 'Netscape') && (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null))); 
}

$(document).ready(function () {
   if (isIE()) {
       $("img:not([src])").each(function () { $(this).attr('src', "/MyImages/Transparent.png"); });
   }
}

免责声明：浏览器嗅探是不好的。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接