html - 图像在 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 属性以前是 visited .

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

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