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
}

Answer 2

大多数浏览器在图像包含在链接中时会在图像周围绘制蓝色或紫色边框。颜色与文字链接相同;蓝色为未访问，紫色为访问。

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

a img {
    border: none;
}

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

2 个答案: