Как убрать контур у ссылок-картинок в ИЕ

Чтобы при клике открывалось увеличенное изображение или был переход на подробное чтение новости, изображение делают ссылкой.

Но почему-то даже в Internet Explorer 8 (IE 8)  селектор img, окруженный тегом <a>, визуально проявляется рамкой. Цвет которой определяется цветом ссылки. В Google Chrome такого эффекта в виде рамки нет.

На самом деле, это сильно напрягает. В ИЕ выглядит весьма жутко:

ИЕ добавляет ужасную рамку ссылкам-картинкам

На самом деле убрать рамку вокруг изображений-ссылок очень просто. Не надо специально чего-то мудрить с  Internet Explorer, типа условных комментариев, чтобы избавиться от багов, присущих этому чудесному браузеру.

Достаточно просто дописать в CSS к селектору img свойство border со значением none, как показано ниже.

Вариант № 1

a img {
 border: none; /* убрать рамку у ссылок-картинок */
}

Вариант № 2

a img {
 text-decoration: none; /* скрыть контур у ссылок-картинок */
}

Вот и весь секрет :)

Опять извечный риторический вопрос: когда же ИЕ перестанет отличаться от всех нормальных браузером своими извращениями?. Ведь речь идет не о шестой и даже не седьмой версии браузера? Это ведь восьмой Интернет Эксплорер, который поддерживает веб-стандарты!


Понравилась статья? Поделиться с друзьями:
Комментарии: 10
  1. Fess

    Большое спасибо! Все оказалось просто, как и все гениальное

    1. FORTRESS-DESIGN (автор)

      Да, когда не знаешь решение этой задачи, то может казаться, что она станет большой проблемой :).

      1. Highlight

        Блин! Спасибо ОГРОМНЕЙШЕЕ просто. Ваял проектик небольшой… Посматривал в опере, хроме и фаерфоксе… Про IE забыл совсем… А как открыл… ужаснулся. Но благодаря Вам решение я нашел меньше, чем за 5 минут.

        Еще раз спасибо и всяческих успехов! :)

        1. FORTRESS-DESIGN (автор)

          Спасибо, рад что данный способ оказался решением проблемы.

  2. Дэн

    На самом деле бывают с Лучшим в Мире Браузером проблемы и с Вашим решением. Вернее проблему это не решает. Коль так, не панацеей (это слово в случае с ИЕ применять неграмотно), но одним из варантов является отъем бордера только у картинки (ссылку не трогать), или же указание дополнительного свойства: text-decoration: none; для обоих элементов

    1. FORTRESS-DESIGN (автор)

      Дэн, мне нравится как вы излагаете мысль. Из этого я делаю вывод о том, что вы не обычный человек. Смею предположить, что вы не довольствуетесь ширпотребом, а предпочитаете изысканные вещи.

      Даже text-decoration не поленились выделить курсивом. Спасибо.

      Кроме того, предложили еще одно решение как избавиться от навязчивого контура у ссылок-картинок.

      А Лучший в Мире Браузер — это Гугл Хром?

      1. Дэн

        Спасибо за оценку моего литературного творчества :)

        ЛвМБ — нет, это я про ИЕ (просто надо было, наверное, кавычки поставить — не доглядел)).

        1. FORTRESS-DESIGN (автор)

          Ну, да, в принципе, я сам должен был догадаться.

  3. Николай

    В шаблоне gardening_theme
    надо вырезать вот этот код тогда точно рамка вокруг картинки удалим, иначе ничего не помогло.

    .art-article img, img.art-article
    {
    border: solid 1px #A6A6A6;
    margin: 10px;
    }

    .art-metadata-icons img
    {
    border: none;
    vertical-align: middle;
    margin: 2px;
    }

    .art-article table, table.art-article
    {
    border-collapse: collapse;
    margin: 1px;
    width: auto;
    }

    .art-article table, table.art-article .art-article tr, .art-article th, .art-article td
    {
    background-color: Transparent;
    }

    .art-article th, .art-article td
    {
    padding: 2px;
    border: solid 1px #B5B5B5;
    vertical-align: top;
    text-align: left;
    }

    .art-article th
    {
    text-align: center;
    vertical-align: middle;
    padding: 7px;
    }

  4. Вячеслав

    Спасибо, помогло)

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: