Если поставить на ссылку вместо подчеркивания (text-decoration) — border-bottom, то в ие этот нижний бордер виден не будет, он пропадает. Есть 2 пути решения этой проблемы.

Итак, пусть мы ссылкам задаем такое подчеркивание:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<style type="text/css">
a:link {
	text-decoration:none;
	color:#000;
	border-bottom:1px solid #000;
}
a:visited {
	text-decoration:none;
	color:#000;
	border-bottom:1px solid #000;
}
a:hover {
	text-decoration:none;
	color:#000;
	border-bottom:none;
}
</style>

Как я сказал выше, в интернет эксплорере (6й и 7й версии) этот border-bottom виден не будет. Чтобы его показать нужно сделать следующие манипуляции:

1. Добавить к ссылке свойство position:relative; с z-index:1; (на всякий случай)

2. Или можно поиграться со свойством line-height, ставить ему различные значения, пока подчеркивание не будет видно.

Также наблюдается некоторый баг (странно, сейчас его не заметил, видимо это было в ранних версиях) в файрфоксе, что когда мы подводим курсор к бордеру-подчеркиванию, он начинает быстро то пропадать, то появляться, то бишь мерцать. Лечилось это с помощью задавания ссылке на hover не border-bottom:none, а border-bottom:1px solid #цветфона. Еще раз повторюсь, сейчас при составлении примера этого бага не заметил (ФФ 3.5), но вот где-то полгода назад сталкивался с этим на реальном проекте.

Метки: border, ie, ссылка

Запись опубликована 22.09.2009 в 21:39 и размещена в рубрике css. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.