Почему тег располагается ПОД на экране (только Firefox 4 Chrome!)

#html #css #xhtml #hyperlink #image

#HTML #css #xhtml #гиперссылка #изображение

Вопрос:

Я не уверен, что это сбой / особенность в последних версиях Firefox и Chrome, но у меня есть <img> тег, который был инкапсулирован <a> тегом, чтобы превратить изображение в ссылку.

Проблема возникает в том, что поле для перехода по ссылке находится под изображением. Изображение также доступно для просмотра, но мертвое пространство под изображением также доступно для просмотра.

К <img> нему применяется правило левого и нижнего полей, которое, я думаю, и является причиной проблемы, но я не понимаю почему… Я также пытался использовать явные </img> закрывающие теги, поскольку это тоже не решило проблему.

Internet Explore 8 работает так, как ожидалось! Не отображает проблему, описанную ниже. Он показывает поле под изображением, но в IE 8 на мертвое пространство нельзя щелкнуть. Я думаю, именно так это и должно работать.

Вот изображение, чтобы прояснить, что я имею в виду:

Я только что добавил правило для окаймления всех <a> тегов.

И вот код…

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    a
    {
        text-decoration: none;
        border: 1px solid #F00;
    }

    #testimg        {
        margin-left: 20%;
        margin-bottom: 25px;
    }
</style>
</head>
<body>
<div><a href="#"><img id="testimg" alt="" src="imgs/landing/popup_sendbtn.png" /></a></div>
</body>
</html>

Это сводит меня с ума! Буду признателен за любую помощь.

Ответ №1:

У вас есть поле в img. Переместите их в тег a, и это может исправить это.

Ответ №2:

Область с возможностью кликабельности под вашим <img> — это то место, где текстовое содержимое предположительно должно размещаться в <a> элементе.

Если вы хотите, чтобы кликабельной была только область изображения, укажите <a> ту же ширину и высоту, сделайте это display: block и переместите поля на <a> .

 a {
    display: block;
    width: /* width of your image */;
    height: /* height of your image */;
    text-decoration: none;
    margin-left: 20%;
    margin-bottom: 25px;
    border: 1px solid #F00;
}

1. Это проблема полей, а не встроенных элементов. тег <a> расширяется до размера изображения, которое он переносит, даже если оно встроенное.

2. @Headshota: Да, сначала я запутался, но я исправил свой ответ так быстро, как мог. Упс.

3. Спасибо! Перемещение полей <a> тега и добавление display: block сделали свое дело.