Свого часу http://razetdinov.inc.ru/ писав замітку про посилання в комірках у розділі JavaScript. Запропонований метод, звичайно, дуже хороший, але нещодавно на своєму улюбленому сайті anfrax.ru я зіткнувся із абсолютно чудовим CSS трюком, який, по-перше, в точності відтворює JavaScipt’овий метод, а по-друге, дуже лаконічний і гарний. Дивно, я зустрічав подібне рішення (перевизначення властивості display) раніше, але не взяв до уваги, що воно може стати в нагоді й в даній ситуації…
Отже, ось, що необхідно для досягнення нірвани у випадках з вертикальним і горизонтальним розташуванням комірок:
Варіант з вертикальними комірками:
a {
background-color:#CCCCCC;
border:2px dotted #000000;
display:block;
line-height:100%;
margin:3px;
padding:20px
}
a:hover {
background-color:#FFC0CB;
}
У результаті ми маємо таке:
це в нас посиланняце в нас посилання номер два
Варіант з горизонтальними комірками:
a {
background-color:#CCCCCC;
border:2px dotted #000000;
display:"inline-block"; /* лапки необхідні, щоб NN6 нормально сприймав (тобто ігнорував) нестандартне, IE'шне значення inline-block, яке правильно вписує тег A в layout сторінки (для NN6 і Opera не знайшлося подібного, правильно працюючого значення display) */
margin:3px;
padding:20px
}
a:hover {
background-color:#FFC0CB;
}
Отримуємо наступне:
це у нас посилання це у нас посилання номер два
А можна поступити з горизонтальними комірками по-іншому(я чомусь забув про чудову властивість float):
a {
background-color:#CCCCCC;
border:2px dotted #000000;
display:block;
float:left;
margin:3px;
padding:20px
}
a:hover {
background-color:#FFC0CB;
}
У результаті ми маємо таке:
це у нас посиланняце у нас посилання номер два
Великим плюсом використання одного із зазначених методів є той факт, що вони беззастережно працюють в IE5.5+ (у IE5.0 не працюють варіанти з горизонтальними комірками) і в NN6+, і Opera5+ (іноді, щоправда, з деякими химерними глюками). Погодьтеся, це непогана сумісність.
***
Це переклад статті. Оригінал тут.
Джерело: http://htmlcoder.visions.ru/