chrome css: border-radius не отображается

Question

У меня проблема с border-radius на Chrome (последняя сборка).У меня есть радиус границы: 10 пикселей;на рамке слайдера с этой страницы: http://next.lab501.ro/

В Firefox и IE9 все работает, но не в Chrome, и я не могу понять, почему, потому что у меня есть другие элементы с border-radius, которые работают простохорошо в Chrome.

Answer 1

Я проверил, используя Safari "Web Inspector", и ваш CSS определенно успешно применяется к вашему контейнеру.

Я думаю проблема связана с содержимым содержимогоэлемент с радиусом границы, "вырывающимся" по закругленным углам контейнера.См. эту статью для получения дополнительной информации.Я полагаю, что проблема была впервые правильно сообщена Ричардом Раттером .

В вашем случае вы уже используете overflow: hidden для контейнера, и это не работает - это может быть связано сz-индексы, которые у вас есть, но на таком сложном примере это трудно сказать.

Я бы попробовал скруглить углы содержащихся элементов, которые кажутся переполненными.Мне кажется, это работает на этой странице:

dl.slidedeck {
    border-radius: 10px; 
}

div.sd-node.sd-node-caption {
    border-radius: 10px;
}