Закругленные углы не могут отключить контент в браузерах webkit, если позиция: относительная

Ответ 1

http://jsfiddle.net/USd5s/

Ненавидьте добавить дополнительные элементы dom, но простая оболочка исправляет это прямо вверх. Вам не нужно использовать мой выбор метода element или css, или span, и квалифицированный css - это только мой вкус. или что-то будет работать так же хорошо.

Ответ 2

Вы можете заставить его визуализировать в 3d с помощью:

-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
transform: translateZ(0);    

Ответ 3

Просто установите внутренний для того же радиуса границы, что и внешний.

.inner {
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

О, и не забывайте о людях-сайтах.:]

Ответ 4

У меня была такая же проблема в проекте и решить ее с небольшим изменением в CSS

вместо установки position в relative Я установил его на наследовать:

.outer {
    background:yellow;
    border: solid 1px black;
    position: inherit;
    overflow:hidden;
    border-radius: 12px;   
}

И это решило проблему.

Ответ 5

Вы можете дать внутреннему div тот же самый радиус границы: http://jsfiddle.net/eCsA3/8/

<div class="outer">
    <div class="inner">
    </div>
<div>

<style type="text/css">
.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
    -moz-border-radius: 12px;
    border-radius: 12px;   
}
</style>

Ответ 6

Я верю, что где-то я где-то читал, что вам нужно скопировать контейнер на что-то, чтобы решить эту проблему. Я не совсем уверен, но я думаю, что это путь.

Ответ 7

Как сказал Пол Саид, ошибка в webkit, но вы все равно можете обойти его, используя поля на внутреннем div.

Ответ 8

См. ссылку . Это решает вашу проблему.

#wrapper {
    margin-top:250px;
    width: 300px; 
    height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

Ответ 9

Попробуйте это как CSS для .inner:

.inner {
    background: red;
    height: 50px;
    position: absolute;
    top: 1px;
    left: 12px;
    right: 12px;
    bottom: 1px;
}

Вам нужно будет настроить bottom и top, чтобы получить высоту справа. Если оставить неизменным, класс будет иметь только высоту одного пикселя. Этот метод устанавливает левое и правое поля в радиус границы, поэтому на краях ничего не появляется.

В качестве альтернативы, если у вас есть сплошной цвет фона вокруг .outer, вы можете сделать изображение следующим образом: где область внутри (клетчатая область на изображении) прозрачна, а область снаружи - цвет фона. Затем используйте изображение границы или абсолютное позиционирование, чтобы поместить его, где расположены углы. Дайте ему высокий z-index. Когда вы прокручиваете, содержимое будет скрыто под заполненной частью угла.