Как удалить границы вокруг ссылок в IE?

У меня есть панель навигации, состоящая из элементов <img> в своих соответствующих элементах <a>. Однако по какой-то причине в IE его темная черная рамка вокруг изображений. Это не то же самое в других браузерах, я не могу понять это... Это html, который я использую.

<li>
   <a href="#">
      <span id="nav1">
         <img src="tt_1.png" />
      </span>
   </a>
</li>

У меня около 5 ссылок, все написано так, и я использовал CSS, чтобы вписать его в панель навигации. В других браузерах это выглядит как

но в IE это выглядит как

Я никогда раньше не сталкивался с такой проблемой, и до сих пор не работал. Есть ли способ вывести эти границы с помощью CSS?

Ответ 1

TL; DR

Удалите границы всех ссылок и изображений:

a, img {
    border:none;
    outline:none;
}

Полная версия

Если вы хотите удалить границы изображений, которые являются ссылками, вы должны сделать следующее:

a img {
    border:none;
    outline:none;
}

Единственное отличие состоит в том, что между a и img нет запятой, что означает, что только изображения внутри a -tags будут применять это правило

Pro tip: используйте css reset

Несоответствия браузера, подобные этому, многочисленны, поэтому веб-разработчики часто используют "css reset", т.е. https://necolas.github.io/normalize.css/ или http://meyerweb.com/eric/tools/css/reset/. Это будет (среди других отличных вещей) reset вещи, такие как границы, поля и т.д. На нескольких элементах, чтобы они отображались более последовательно в браузерах.

Ответ 2

Я считаю, что IE помещает границы вокруг изображений, которые являются ссылками. Поэтому вы можете удалить это, сказав:

a img {
    border: 0;
}

Ответ 3

добавить style="border: none;" к тому, что создает границу, или создать css с этим атрибутом.