Хром - граница CSS не работает правильно

У меня есть элемент встроенного блока с текстом, и я хочу, чтобы он разбил подчеркивание. Поскольку я не могу установить это с свойством text-decoration, я добавляю border-bottom к элементу. Но он действует довольно странно в Chrome - цвет границы не я указываю, он выглядит немного прозрачным. Однако он отлично выглядит в IE и Firefox. Если я не укажу нижнюю границу и просто рисую все четыре границы, все выглядит правильно. Я также попытался обернуть элемент в другой div, и он не дал результата. Кроме того, проблема исчезает, когда я увеличиваю line-height до, скажем, 3,1 и более, но граница, очевидно, очень далека от текста. Я использую последнюю версию Chrome. Я также прилагаю скриншоты, чтобы описать проблему.Хром - граница CSS не работает правильно

код CSS:

.contacts_link-to-map { 
    display: inline-block; 
    border-bottom: 1px dashed #FFD4F3; 
    font-size: .8em; 
    line-height: 1.1; 
}

Вот ссылка на CodePen: http://codepen.io/GALLlblSH/pen/MwwRNB?editors=110

Border в Moz/IE:

enter image description here

Border в Chrome:

UPDATE: Я нашел решение, но это действительно странно и, похоже, не связано с проблемой. Я только что удалил margin: 5px 0 0 0; в стиле .contacts_social, и все стало хорошо. Кто-нибудь знает, в чем причина такого поведения?

источник

2015-05-03 George Bagretsov

Лучше также поделиться [codepen] (http://codepen.io/) или [jsfiddle] (http://jsfiddle.net/) ссылка на существующий код. – sarbbottam

Добавлена ссылка на CodePen –

Не удалось воспроизвести, извините. Возможно, попробуйте установить цвет со 100% непрозрачностью, используя rgba(); – Darvanen

Попробуйте добавить это выше вашего CSS линии для границы дна

border-top: 1px dashed rgba(0,0,0,0);

Это немного рубить, но, кажется, чтобы решить проблему

Codepen revised css

источник

2015-05-04 00:54:13 Isometrics

К сожалению, это не так. Кажется, что когда нижняя граница является единственной видимой (независимо от того, существуют ли другие границы), она выглядит более прозрачной. –

Хром - граница CSS не работает правильно

ответ

Смежные вопросы