Закругленные углы (border-radius) не работают должным образом на Safari 8 iPad Mini

-1

Первые три элемента работают, как и ожидалось, но другие нет - пожалуйста, проверьте прилагаемое изображение.Закругленные углы (border-radius) не работают должным образом на Safari 8 iPad Mini

jsfiddle demo

HTML:

<div class="citation-links"> 
<a href="linkout" target="_blank" class="ref-link ui-link">CrossRef</a> 
<a href="linkout" target="_blank" class="ref-link ui-link">PubMed</a> 
<a href="linkout" target="_blank" class="ref-link ui-link">CAS</a> 
</div>

CSS:

.ref-link { 
    display: inline-block; 
    padding: 0em .75em .15em; 
    margin: 0 .25em 0; 
    color: #FFF !important; 
    background-color: #4E4E4E; 
    line-height: 1.2em; 
    font-size: .75em; 
    position: relative; 
    top: -.15em; 
    -webkit-border-radius: 1000px; 
    -moz-border-radius: 1000px; 
    border-radius: 1000px; 
}

источник

2015-07-23 Bashar

Если я не понимаю, округлые углы выглядят ОК на вашем изображении для ссылок 4 и 5, но белый текст отсутствует. Можете ли вы подробно рассказать о том, в чем проблема: что вы ожидаете от них? – w5m

Проблема заключается в том, что белый текст не отображается внутри якоря. (На изображении элементы div справа отображаются проблема) – Bashar

вот демон jsfiddle для проблемы, но я не смог имитировать сафари! http://jsfiddle.net/shareefhiasat/5d4gzzwk/ – shareef

Мой коллега нашел решение этой проблемы. Что вызывает этот вопрос является ниже стилей:

position: relative; 
top: -.15em;

Удаление выше двух стилей сделали это прекрасно работает.

источник

2015-07-28 06:46:48 Bashar

Закругленные углы (border-radius) не работают должным образом на Safari 8 iPad Mini

ответ

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