Почему IE8 добавляет нижнюю границу моего тега привязки изображения?

Я знаю, это жалко, но это только что обошлось, чтобы установить IE8 на мою машину этим утром. Сразу после битвы я столкнулся с вопиющей проблемой, и я слишком долго общался с ней, хотя я ЗНАЮ, что ответ смотрит мне прямо в глаза.

Прежде всего, здесь веб-сайт: www.mchenry.edu Просмотрите его в IE8 и наведите указатель мыши на верхнее изображение баннера - видите ли все сдвиг вниз? Это какой-то тип оформления текста или границы, но я не могу понять, что. В нашей тестовой среде я даже попытался получить конкретную информацию с помощью

#banner p#img a:hover {text-decoration: none};

Но это ничего не делает. И что еще более раздражает то, что я не могу заставить его появляться в IE6, 7 или FF, или Safari, или Opera и т.д. Избиение. Глава. Против. Стол письменный.

Спасибо за любую информацию, которую вы, ребята, можете иметь.

Ответы

Ответ 1

Хорошо, посмотрим. Вот где инструменты разработчика могут пригодиться.

Используя инструменты разработчика, я навел курсор на изображение и активировал функцию "нажмите, чтобы выбрать", поскольку это поддерживает "ошибку". Я щелкнул по этой маленькой области и выделил < p id = "img" > , который теперь имел высоту 128.

Что-то расширяет p на два пикселя и редактирует источник, чтобы удалить <a> устраняет проблему, так ясно, что-то там ее беспокоит. Я не вижу, что, и это не помогает, что я не могу повлиять на цвет этой маленькой коробки.

Однако мы можем сделать больше: мы можем вырвать части CSS. Я удалил правила CSS из Records.css один за другим, и когда a: hover был удален, проблема исчезла. Идя глубже, удаляя фоновый цвет оттуда, он остановился!

Таким образом, простым решением является назначение <a> элемент новый атрибут: style = "background-color: transparent".

Обратите внимание, что я не тестировал это с помощью каких-либо других браузеров или версий, но я не вижу, чтобы это правило влияло на другие браузеры (плохо).

Ответ 2

попробуйте следующее:

#img a:hover {text-decoration: none!important;}

Ответ 3

Я только что столкнулся с этой же ошибкой в ​​IE8 (версия 8.0.6001.18702).

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

К сожалению, если вам нужен цвет фонового рисунка на ваших ссылках, не существует обобщенного решения - самое лучшее, что вы можете сделать, это создать класс для "imagelink", который вы применяете ко всем своим якорным тегам, которые окружают тег img

<a href="test.html" class="imagelink"><img src="test.gif" alt="test"/></a>

Затем вы можете использовать CSS:

a.imagelink:hover { background-color: transparent; }

Это должно работать с ошибкой IE8 для ваших ссылок на изображения, позволяя вам сохранять цвет фонового рисунка на других гиперссылках.

Не очень элегантный, но я не хотел следовать рекомендациям Jan о использовании метатега, чтобы заставить IE8 отображать как IE7 (есть много вещей, которые IE8 делает лучше, чем IE7, и я не хочу возвращать все рендеринг в IE7 по этой одной проблеме).

Я нахожу его поразительным, что, несмотря на всю шумиху вокруг IE8, которая намного лучше, чем более старые версии, мы все еще находим ошибки такого характера: выбор цвета, вызывающий проблему макета, Невероятно. И все же этот поток был запущен еще в июле прошлого года - и ошибка остается незафиксированной, и все больше разработчиков вынуждены тратить время на выявление проблемы и загрязнение своего кода с помощью обходных хаков для решения проблемы только для IE. Это похоже на IE6 снова и снова. Надеемся, что внедрение на экране браузера экрана в новых установках Windows поможет открыть глаза всем подходящим веб-браузерам.

Ответ 4

Майкл анализ фонового стиля тега привязки, который запускает эту ошибку в IE8, находится на месте. Но вместо того, чтобы обойти это, добавив атрибут стиля ко всем тэгам привязки, вы можете сказать IE8, чтобы отобразить вашу страницу способом IE7, добавив этот метатег в качестве первого тега внутри основного тега:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

или добавив эту строку в .htaccess:

Header set X-UA-Compatible IE=EmulateIE7

to заставляет IE8 работать в режиме совместимости с IE7.