Встроенный img с <a> вызывает странную проблему в IE

StackOverflow https://stackoverflow.com/questions/926180

Вопрос

Документальный тип:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML:

<a href="http://www.somelink.com">
    <img src="images/someimage.jpg" alt="sometag" />
</a>

CSS:

div.something img {
    display:            inline;
    border:         none;
}

Firefox показывает их просто отлично, IE просто добавляет небольшое встроенное поле (предположительно, там, где он ожидает, что текст будет?) с фиолетовой рамкой, которую IE использует для посещенных ссылок.Это встречается во всех версиях (6, 7 и 8).

Это было полезно?

Решение

Используя следующий HTML-код, я смог воспроизвести вашу проблему:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        div.something img 
        {
            display: inline;
            border: none;
        }
        div.something a
        {
            border: 0;
        }
    </style>
</head>
<body>
    <div class="something">
        <a href="http://www.somelink.com">
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
        <a href="http://www.somelink.com">
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
        <a href="http://www.somelink.com">
            <img src="images/someimage.jpg" alt="sometag" />
        </a>
    </div>
</body>
</html>

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

Заменяя их на:

<a href="http://www.somelink.com"><img src="images/someimage.jpg" alt="sometag" /></a>

решил проблему в IE8 для меня.

Редактировать:Удалил CSS.Оказалось, в этом нет необходимости.

Другие советы

Вам нужно установить border="0" в вашем теге изображения это решит проблему.Т.е. когда изображение находится внутри ссылки, оно автоматически обводит его рамкой "ссылка", чтобы показать, что это ссылка.

Вы также можете использовать CSS, чтобы установить границу равной 0 для тега img

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top