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

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

0 голосов
/ 29 мая 2009

Doctype: 

<?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).

Ответы [ 2 ]

4 голосов
/ 29 мая 2009

Используя следующий 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. Оказалось, не нужно.

1 голос
/ 29 мая 2009

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...