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

Question

Закругленные углы не могут обрезать контент в браузерах WebKit (например, Chrome), если position:relative;

См. демо .

HTML:

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

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;
}

Кто-нибудь знает об исправлении? * 1018 Благодарения и *

Answer 1

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

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

Answer 2

http://jsfiddle.net/USd5s/

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

Answer 3

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

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

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

Answer 4

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

вместо установки положение в относительно Я установил наследовать :

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

И это прекрасно решило проблему.

Answer 5

Пожалуйста, смотрите эту ссылку .Это решает вашу проблему.

#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 */
}

Answer 6

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

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

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

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

Answer 7

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

Answer 8

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

Answer 9

Вы можете присвоить внутреннему 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>