E и поведение ссылок при наведении
В этой заметке я опишу один момент, который довольно часто можно встретить в сложной вёрстке с CSS, но который редко проявляет себя или на который редко обращают внимание.
Этот момент проявляет себя в случае когда в IE внутри ссылки есть блок со свойством hasLayout, тогда можно заметить следующее:
-
клик по картинке, расположенной в таком блоке, не вызывает переход по ссылке;
-
при правом клике по блоку с
hasLayoutне появляется контекстное меню ссылки (т.е. IE для контекстного меню считает этот блок просто контентом, что также можно заметить по курсору над таким блоком).
Кроме того, если внутри ссылки с прозрачным (transparent) фоном есть какой-либо элемент, а мы хотим поменять его свойства, скажем, через такой селектор: A:hover EL {…}, то, при наведении на этот элемент, селектор применяться не будет.
Собственно, такое поведение селектора исправляется просто — необходимо прописать фон для ссылки, в таком случае всё встанет на свои места (или же можно применить word-spacing:0, что тоже помогает, спасибо Вадиму Макишвили за этот метод.
Однако, в случае с отсутствием контекстного меню и картинкой всё сложнее.
Основной способ проявить в таком случае контекстное меню выполняется в два шага:
-
Необходимо применить к ссылке
hasLayoutи прозрачный фон (скажем, прозрачный однопиксельный гиф или жеbackground: url(about:blank)— такой фон, в дальнейшем, я буду называть «явный прозрачный фон») -
Самому блоку с
hasLayoutнеобходимо прописать такой же прозрачный фон и отрицательныйz-indexс относительным позиционированием.
Если всё сделать правильно — очень вероятноGo to a sidenote, что всё заработает. Очень важно, чтобы сама ссылка была с прозрачным фоном (иначе блок с з-индексом не будет видно) и без заданного позиционирования (position:static), иначе опять же не сработает.
К сожалению, более корректного и простого фикса я не нашёл, поэтому в данный момент, когда у нас есть ссылка, которую надо «тяжело» оформить, желательно все дополнительные элементы класть не внутрь ссылки, а обрамлять её ими. Кроме того, полезно всегда быть уверенным, что ссылка не спозиционирована, т.е., по возможности, позиционировать обрамляющие её элементы. Желательно всегда таким ссылкам прописывать hasLayout и явный прозрачный фон, в таком случае можно минимизировать возможные проблемы как с контекстным меню, так и с селекторами дочерних элементов. Надо сказать, что явный прозрачный фон у ссылок также может помочь против некоторых багов у Оперы, возможно в будущем я опишу их.
Ну, а вот и несколько примеров — в которых можно посмотреть поведение ссылок в IE и почитать код.
Вы можете прокомментировать эту статью в Мастодоне.
Опубликовано с метками: #Practical #CSS #Bugs #Outdated