Изображения отображаются по-разному в браузерах 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
}

Answer 2

Большинство браузеров рисуют синюю или фиолетовую рамку вокруг изображений, когда они содержатся внутри ссылки. Цвет такой же, как для текстовых ссылок; синий для не посещенных, фиолетовый для посещенных.

Вы можете удалить границу, используя следующий CSS:

a img {
    border: none;
}