在 Windows 和 OS X 浏览器中呈现不同的图像答案

【问题标题】：Images rendering differently within Windows and OS X browsers在 Windows 和 OS X 浏览器中呈现不同的图像
【发布时间】：2011-07-14 16:18:29
【问题描述】：

我发现我的 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 可以完美地渲染它吗？

谢谢！

【问题讨论】：

你能显示一个实时链接或截图吗？后者将是最佳的

标签： html css windows macos

【解决方案1】：

img {
    border: 0
}

在你的 CSS 中会修复它。

您看到的是 Internet Explorer 中链接内图像的默认边框，该链接具有以前为 visited 的 href 属性。

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

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

【讨论】：

谢谢！像魅力一样工作！

【解决方案2】：

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

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

a img {
    border: none;
}

【讨论】：