Ссылки с вложением

Автор: Андрей Косяк Дата публикации:

IE6 ссылки с вложением

Проблема

В ссылке, в которой есть вложенные друг в друга элементы, при определённых обстоятельствах (в виде css правил), кликабельным остаётся только первый.

Решение

Вариантов решения, на самом деле, несколько. Выбор конкретного зависит от поставленной задачи и дизайна. Итак, чтоб было понятно, "павлин-мавлин" выглядит так:

<a href="#">
    <span>
        <img src="img.png" alt="" width="100" height="100" />
    </span>
</a>

span {
	width: 100px;
	height: 100px;
	display: block;
}

В ИЕ6 такая конструкция будет не кликабельна. Пример.

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

Вариант 1

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

span {
	display: block;
}

Результат

Вариант 2

"Вытаскиваем" картинку из спана и кладём её за ним:

<a href="#">
    <span></span>
    <img src="img.png" alt="" width="100" height="100" />
</a>

Спану добавляем "маленькое счастье", а картинка в данном случае будет спозиционирована абсолютом (само собой, ссылку нужно наделить relative/absolute):

span {
    width: 100px;
    height: 100px;
    display: block;
    cursor: pointer;
}
img {
    position: absolute;
    top: 0;
    left: 0;
}
a {
    position: relative;
}

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

Результат.

Вариант 3

Такой вариант подойдет, если нет жесткого требования по кликабельности рамки (span). Просто меняем местами элементы:

<span>
    <a href="#">
        <img src="img.png" alt="" width="100" height="100" />
    </a>
</span>

Результат

Вывод

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

Xiper