html - 如何删除 IE 中链接周围的边框?

标签 html css

<分区>

我有一个导航栏,其中包含 <img>各自内的元素 <a>元素。然而,出于某种原因,在 IE 中,它在图像周围形成了深黑色边框。它在其他浏览器中不一样,我似乎无法弄清楚...这是我正在使用的 html。

<li>
   <a href="#">
      <span id="nav1">
         <img src="tt_1.png" />
      </span>
   </a>
</li>

我有大约 5 个链接都是这样写的,我使用 CSS 将其样式化为导航栏。在其他浏览器上它是这样的 good bar

但在 IE 上它是这样的 Bad bar :(

我以前从未遇到过这样的问题,而且我已经重新尝试修复它,但到目前为止还没有奏效。有没有办法使用 CSS 去除这些边框?

最佳答案

长话短说

去除所有链接和图片的边框:

a, img {
    border:none;
    outline:none; /* this breaks accessibility */
}

**完整版本**

如果您只想删除链接图像的边框,您应该执行以下操作:

a img {
    border:none;
    outline:none; /* this breaks accessibility */
}

唯一的区别是 aimg 之间没有逗号,这意味着只有 a 标签内的图像才会应用此规则

专业提示:使用 css 重置

像这样的浏览器不一致问题很多,因此网络开发人员经常使用“css 重置”,即 https://necolas.github.io/normalize.css/http://meyerweb.com/eric/tools/css/reset/ .这将(在其他一些有趣的事情中)重置许多元素的边框、边距等内容,以便它们在浏览器中呈现得更加一致。

无障碍注意事项

经常被开发人员认为令人不安的虚线轮廓对于键盘用户来说具有非常重要的功能。

永远不要删除它。如果这样做,您需要通过添加 :focus style 来找到焦点所在的另一个视觉指示器。

关于html - 如何删除 IE 中链接周围的边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7910209/

相关文章:

css - div 元素之间的随机间隙

html - CSS 媒体查询中的严格不等式

css - 将水平 JQuery 选项卡更改为垂直选项卡

css - 是否有 CSS 父级选择器?

javascript - 使用按钮和媒体查询切换显示状态

html - 真的允许通过 CSS 导入文本吗?

javascript - 防止换行但允许在文本区域(jquery)中输入(提交)

javascript - 当前上下文中不存在文本框

php - css 因未知原因覆盖 php

javascript - 在 d3 中渲染铁路数据时奇怪的填充效果