Бордер для ссылки

[okunev2]

<div class="test"><a href="#">Ссылка</a></div>

.test {position: absolute; font-family: 'Open Sans', sans-serif; font-size: 14px; color: #333; line-height: 13px; height: 13px; top: 21px; display: block;}.test a {color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3);}.test a:hover  {color: #ff0 !important; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 0, 0.3);}

В любой версии IE нету этого нижнего бордера. Как вылечить?

Добавил ссылки position: relative; но проблема до конца не решилась, оказывается в ИЕ не срабатывает проразность rgba(255,255,255,0.3);

 

Т.е. вся проблема 0.3. Есть ли кробраузерное решение?

[antonKar]

Код на http://jsfiddle.net/, это первое.

 

Второе: Internet Explorer до 8 версии включительно не поддерживает rgba. IE9 и выше поддерживает. Если не работает в IE9 и выше, то возможно, что вёрстка у вас отображается в режиме совместимости, проверьте правильность написания doctype. Это второе.

 

Третье. Для IE8 можно задать background, где в качестве фона поставить полупрозрачную полоску.

 

Четвёртое: на хрена подчёркивание ссылки делать полупрозрачным? o_O

[okunev2]

Код на http://jsfiddle.net/, это первое.

 

Второе: Internet Explorer до 8 версии включительно не поддерживает rgba. IE9 и выше поддерживает. Если не работает в IE9 и выше, то возможно, что вёрстка у вас отображается в режиме совместимости, проверьте правильность написания doctype. Это второе.

 

Третье. Для IE8 можно задать background, где в качестве фона поставить полупрозрачную полоску.

 

Четвёртое: на хрена подчёркивание ссылки делать полупрозрачным? o_O

 

Вот дизайнер так нарисовал зараза с прозрачностью

 

Я уже background испробывал и картинке png потянул background: url('./images/border-bottom-white.png') repeat-x 0 bottom;

 

Но вот в Сафари png как-то по-другому выглядит нежели в других браузерах, темнее

[antonKar]

Вот за такое реально надо их палкой бить.

 

А для Сафари зачем background? Через условные комментарии для IE8 background, а для нормальных браузеров по-нормальному через border.

[okunev2]

Так и сделал, больше ни как Ибо дизайнеру долго объяснять, они же правы ... верстали бы они сами, поняли бы суть

[Zverushka]

А вообще разве видно будет у какого-то текста прозрачность в 1пиксельной полосочке? Может лучше непрозрачную полоску вставить - разницы не будет - ну по идее. Конечно воочию увидеть еще надо. Фон сайта неоднородный?

Для ие8 считаю никакой прозрачности не надо - деградация и все. Сделать непрозрачную полоску для них и все. для остальных прозрачную.

То есть написать вот так:

border-bottom: 1px solid #FFFFB2;

border-bottom: 1px solid rgba(255, 255, 0, 0.3);

Edited December 7, 2013 by Zverushka

[antonKar]

border-bottom: 1px solid #FFFFB2; border-bottom: 1px solid rgba(255, 255, 0, 0.3);

 

А последняя строка не перебьёт собой первую во всех случаях, независимо от поддержки rgba? Такая штука, насколько я помню, срабатывает только с префиксными записями.

[swandev]

Верстайте нормально для новых браузеров.

 

Для остальных - это проблема пользователей, главное чтобы верстка корректно отображалась.

[Zverushka]

http://jsfiddle.net/cJ8MV/45/embedded/result/

Вроде пашет в 8м ие - полосочка есть. По идее браузер свойство не распознает и всю строку с ним не обрабатывает, как дефективную. Я всегда так делаю для обратной совместимости. А городить картинки, отдельную обработку условными комментариями, писать отдельные свойства .ie8 - слишком сложно для такого незначительного результата. Немного изящной деградации и все.

Edited December 8, 2013 by Zverushka

[Z1gnet]

А последняя строка не перебьёт собой первую во всех случаях, независимо от поддержки rgba? Такая штука, насколько я помню, срабатывает только с префиксными записями.

"да ты успокойся! я так сто раз делал" (с)

а если серьезно то не перебьет, потому как ие8 попросту не поймет строки с rgba. так что полностью солидарен со @Zverushka

и кстати, когда градиент прописываете что первой строкой идет? правильно обычный background формата background:#f00; а уж потом развилки для всевозможных браузеров.

[SelenIT]

браузер свойство не распознает и всю строку с ним не обрабатывает, как дефективную.

Совершенно верно.

[antonKar]

Раз так, то так.

 

Этот ваш IE8 не поймёшь: сегодня узнал, что background, записанный через один класс, перебивает background-position, записанный через 2 класса и один псевдокласс в IE8. Кзалось бы, причём тут специфичность селекторов?

[Zverushka]

класс в IE

Можно пример на джсфидле?

[antonKar]

Не могу воспроизвести, что-то типа такого было

<!DOCTYPE HTML><!--[if lt IE 7 ]><html lang="ru-RU" class="ie6 ie67 ie678 ie no-js"><![endif]--><!--[if IE 7 ]><html lang="ru-RU" class="ie7 ie67 ie678 ie no-js"><![endif]--><!--[if IE 8 ]><html lang="ru-RU" class="ie8 ie678 ie no-js"><![endif]--><!--[if IE 9 ]><html lang="ru-RU" class="ie9 ie no-js"><![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html lang="ru-RU" class="no-js"><!--<![endif]--><head>    <meta charset="UTF-8">    <title>Internet Explorer 8</title>		<style>		    .one { background: transparent; width: 333px; height: 100px; position: relative; }		    .one-bla_bla_bla { background: #eeeeee; }				.ie8 .one { background-image: url(http://cs313620.vk.me/v313620372/68f7/5758sfjMlUc.jpg); background-position: left top; background-repeat: no-repeat; }		.ie8 .one:hover { background-position: left center; }		</style>    </head><body>    <div class="one one-bla_bla_bla">		</div></body></html>

[swandev]

Раз так, то так.

 

Этот ваш IE8 не поймёшь: сегодня узнал, что background, записанный через один класс, перебивает background-position, записанный через 2 класса и один псевдокласс в IE8. Кзалось бы, причём тут специфичность селекторов?

полезно почитать

http://htmlbook.ru/samcss/kaskadirovanie

[Маленьке Звірятко]

Четвёртое: на хрена подчёркивание ссылки делать полупрозрачным? o_O

На сайте А. Горбунова как раз такое подчеркивание. Интересующиеся могут прочитать ответ И. Бирмана.

[antonKar]

На сайте А. Горбунова

Кто это? 

 

P.S. Погулил.

 

Ну фиг знает, челябинские дизайнеры настолько суровы...

Edited December 16, 2013 by antonKar

[nfsworld]

А по мне так просто взять и забыть о существовании IE версии ниже девятой.