E и поведение ссылок при наведении

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

Этот момент проявляет себя в случае когда в IE внутри ссылки есть блок со свойством hasLayout, тогда можно заметить следующее:

Кроме того, если внутри ссылки с прозрачным (transparent) фоном есть какой-либо элемент, а мы хотим поменять его свойства, скажем, через такой селектор: A:hover EL {…}, то, при наведении на этот элемент, селектор применяться не будет.

Собственно, такое поведение селектора исправляется просто — необходимо прописать фон для ссылки, в таком случае всё встанет на свои места (или же можно применить word-spacing:0, что тоже помогает, спасибо Вадиму Макишвили за этот метод.

Однако, в случае с отсутствием контекстного меню и картинкой всё сложнее.

Основной способ проявить в таком случае контекстное меню выполняется в два шага:

  1. Необходимо применить к ссылке hasLayout и прозрачный фон (скажем, прозрачный однопиксельный гиф или же background: url(about:blank) — такой фон, в дальнейшем, я буду называть «явный прозрачный фон»)

  2. Самому блоку с hasLayout необходимо прописать такой же прозрачный фон и отрицательный z-index с относительным позиционированием.

Если всё сделать правильно — очень вероятноGo to a sidenote, что всё заработает. Очень важно, чтобы сама ссылка была с прозрачным фоном (иначе блок с з-индексом не будет видно) и без заданного позиционирования (position:static), иначе опять же не сработает.

К сожалению, более корректного и простого фикса я не нашёл, поэтому в данный момент, когда у нас есть ссылка, которую надо «тяжело» оформить, желательно все дополнительные элементы класть не внутрь ссылки, а обрамлять её ими. Кроме того, полезно всегда быть уверенным, что ссылка не спозиционирована, т.е., по возможности, позиционировать обрамляющие её элементы. Желательно всегда таким ссылкам прописывать hasLayout и явный прозрачный фон, в таком случае можно минимизировать возможные проблемы как с контекстным меню, так и с селекторами дочерних элементов. Надо сказать, что явный прозрачный фон у ссылок также может помочь против некоторых багов у Оперы, возможно в будущем я опишу их.

Ну, а вот и несколько примеров — в которых можно посмотреть поведение ссылок в IE и почитать код.


Вы можете прокомментировать эту статью в Мастодоне.