图像在 Windows 和 OS X 浏览器中的渲染方式不同

Question

我发现我的 html 文档中的特定图像在任何 Windows 浏览器中都会呈现紫色边框，但在 OS X 浏览器中呈现完美。

代码如下：

<div class="outer-container">
  <div class="header-container">
    <div class="logo"><a href='/'><img src="images/logo.png" alt="" /></a></div>
  </div>
</div>

CSS

.outer-container{
  width:900px;
  margin:0 auto;
}
.header-container{
  display:block;
  float:left;
  width:900px;
  height:110px;
}
.logo{
  display:block;
  float:left;
  padding-top:12px;
}

你知道为什么 Windows 可能会用边框渲染它，而 OS X 却完美地渲染它吗？

谢谢！

Answer 1

img {
    border: 0
}

在你的 CSS 中会修复它。

您所看到的是 Internet Explorer 中链接内图像的默认边框，这些链接具有之前的 href 属性/%3avisited" rel="nofollow">已访问。

首先发生这种情况的原因是 Internet Explorer 在其用户代理样式表中可能有类似的内容：

a:visited img {
    border: 2px solid purple
}

Answer 2

当图像包含在链接内时，大多数浏览器会在图像周围绘制蓝​​色或紫色边框。颜色与文本链接相同；蓝色表示未访问，紫色表示已访问。

您可以使用以下 CSS 删除边框：

a img {
    border: none;
}