我有一个导航栏,其中包含 <img>
各自内的元素 <a>
元素。然而,出于某种原因,在 IE 中,它在图像周围形成了深黑色边框。它在其他浏览器中不一样,我似乎无法弄清楚...这是我正在使用的 html。
<li>
<a href="#">
<span id="nav1">
<img src="tt_1.png" />
</span>
</a>
</li>
我有大约 5 个链接都是这样写的,我使用 CSS 将其样式化为导航栏。在其他浏览器上它是这样的
但在 IE 上它是这样的
我以前从未遇到过这样的问题,而且我已经重新尝试修复它,但到目前为止还没有奏效。有没有办法使用 CSS 去除这些边框?
长话短说
去除所有链接和图片的边框:
a, img {
border:none;
outline:none; /* this breaks accessibility */
}
**完整版本**
如果您只想删除链接图像的边框,您应该执行以下操作:
a img {
border:none;
outline:none; /* this breaks accessibility */
}
唯一的区别是 a
和 img
之间没有逗号,这意味着只有 a
标签内的图像才会应用此规则
专业提示:使用 css 重置
像这样的浏览器不一致问题很多,因此网络开发人员经常使用“css 重置”,即 https://necolas.github.io/normalize.css/或 http://meyerweb.com/eric/tools/css/reset/ .这将(在其他一些有趣的事情中)重置许多元素的边框、边距等内容,以便它们在浏览器中呈现得更加一致。
无障碍注意事项
经常被开发人员认为令人不安的虚线轮廓对于键盘用户来说具有非常重要的功能。
您永远不要删除它。如果这样做,您需要通过添加 :focus
style 来找到焦点所在的另一个视觉指示器。