Странная проблема с границей CSS на Opera

У меня есть ссылка с некоторым текстом внутри нее, который хорошо работает во всех браузерах, но в опере закругленные углы снизу не работают.Странная проблема с границей CSS на Opera

Я использую этот класс CSS для ссылки:

.currentJob:link, .currentJob:visited { 
    border: 1px solid #dcd3ce; 
    background: #ffffff url(../images/applyIcon.jpg) right top no-repeat; 
    margin: .5em 1.5em 1.5em 1.5em; 
    display: block; 
    text-decoration: none; 
    color: #000000; 
    overflow: hidden; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
}

Вот demo.

Кто-нибудь знает, как я могу исправить это в опере? Странно, что ссылка: hover отлично работает в Opera.

источник

2013-05-23 Cristian Boariu

должен быть -webkit-граница радиуса –

@DerekSchlesselman Это, кажется, не будет проблемой, потому что опера принимает это во внимание: 'внешних пунктов пропуска радиус: 10 пикселей, но я тоже это исправил. –

добавить -ограничный радиус – shammelburg

Это не большое решение, добавив радиус границы на .jobCloseDate работ :

http://jsfiddle.net/EG6sS/3/

.jobCloseDate { 
    border-radius: 0 0 10px 10px; 
}

Альтернативное решение. Это kludgy, но это работает. Удалено переполнение и сдвиг вниз по последнему элементу, чтобы «белые пиксели» не были видны.

http://jsfiddle.net/EG6sS/21/

.currentJob:link, .currentJob:visited { 
    border: 1px solid #dcd3ce; 
    border-bottom: 0; 
    background: #ffffff url(../images/applyIcon.jpg) right top no-repeat; 
    margin: .5em 1.5em 1.5em 1.5em; 
    display: block; 
    text-decoration: none; 
    color: #000000; 
    border-radius: 10px; 
    /* removed overflow */ 
} 
.jobTitle { 
    font-weight: bold; 
    color: #006A8A; 
    margin: .6em 45px .1em .6em; 
    font-size: 1.1em; 
    display: block; 
} 
.jobLocation { 
    /* removed .5em from the bottom margin and added it to the top position on the next element */ 
    margin: 0 .7em 1em .7em; 
    display: block; 
    font-size: 0.85em; 
} 
.jobCloseDate { 
    text-align: center; 
    color: #ffffff; 
    font-style: italic; 
    padding: .5em; 
    display: block; 
    background-color: #006A8A; 
    /* added the following styles */ 
    border-radius:0 0 10px 10px; 
    position: relative; 
    top: .5em; 
    left: -1px; 
    margin-top: -1px; 
    margin-right: -2px; 
    border: inherit; 
    border-top: 0; 
} 
.currentJob:hover, .currentJob:visited:hover { 
    border: 1px solid #006A8A; 
    color: #000000; 
}

источник

2013-05-23 17:37:09 cimmanon

Да, я заметил это, но при наведении на нижние углы появляются маленькие пиксели белого цвета. –

Теперь есть решение, которое избавляется от уродливых белых пикселей. – cimmanon

Ничего себе, это здорово! –

-1

Идея,

попробовать -webkit-border-radius и переместить его вверх так, что:

-webkit-border-radius: 10px;
border-radius: 10px;

источник

2013-05-23 17:22:49 Gizzmo

Это не работает ... –

Opera применяет граничный радиус просто отлично, проблема в том, что 'overflow: hidden' игнорируется. – cimmanon

-moz-border-radius: 10px; 
webkit-border-radius: 10px; 
khtml-border-radius: 10px;

Только border-radius: 10px; достаточно. Свойство border-radius поддерживается в IE9 +, Firefox 4+, Chrome, Safari 5+ и Opera.

Но тревожная часть в вашем коде

.jobCloseDate { 
text-align: center; 
color: #ffffff; 
font-style: italic; 
padding: .5em; 
display: block; 
background-color: #006A8A; 
}

Изменить приведенный выше код в

.jobCloseDate { 
text-align: center; 
color: #ffffff; 
font-style: italic; 
padding: .5em; 
display: block; 
border-radius:0 0 0.5em 0.5em; 
background-color: #006A8A; 
}

Я добавил border-radius:0 0 0.5em 0.5em; для блока, потому что, в опере без этого, что jobCloseDate не является давая закругленные углы.

Пожалуйста, смотрите эту ссылку на полный код http://jsfiddle.net/EG6sS/9/

enter image description here

источник

2013-05-23 17:46:59 Ranga

Его хорошая идея * посмотреть * на существующие ответы перед публикацией, чтобы убедиться, что вы не дублируете то, что уже было опубликовано. – cimmanon

Я не дублировал, в то время как я делал изменения, которые были опубликованы в предыдущем ответе. – Ranga

Странная проблема с границей CSS на Opera

ответ

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