Различное поведение при скруглении углов.

[Deadly]

Здравствуйте, есть код:

.test
{
	border: 5px solid #123;
	overflow: hidden;
	background: #555;
	width: 100px;
	height: 100px;
	border-radius: 20px;
}

.test-inner
{
	overflow: hidden;
	background: #621;
	width: 55px;
	height: 55px;
}

<div class="test">
	<div class="test-inner"></div>
</div>

Результат: FF4 и IE9 все хорошо

в Opera и Chrome вылез угол

Возможно ли исправить проблему в Opera и Chrome?

P.S. Вариант со скруглением внутреннего блока не подходит.

Edited March 25, 2011 by Deadly

[psywalker]

Вот он кстати тот самый вариант, который меня тоже расстроил недавно. К сожалению ответ на твой вопрос - Нельзя к сожалению ничего с этим сделать. Overflow собака не скрывает в таких раскладах вложенные блоки. Рад, что в ИЕ9 и ФФ4 эта проблема (хотя ещё надо тестить) решена.

А вообще вместо вложенного блока используй фоновую картику, если есть такая возможность.

[Deadly]

Фигово, конечно, спасибо за ответ.

[hf3]

Пишите им в багтрекеры

[Serlutin]

Пишите им в багтрекеры

Тут ситуация немного сложнее. Если я не ошибаюсь (а ошибаюсь я часто), то в спецификации чётко не прописано, как должны себя блоки внутри блоков с border-radius. Нет, я то понимаю, что логичнее всего, что всё должно скругляться, однако реализовывать такую фичу или нет лежит на совести разработчиков браузеров. Думаете, они не знают, как у них отображается скруглённые уголки? Знают, но пока они, возможно, ещё думают, как лучше это реализовать. Теперь разработчики браузеров ведут себя более разумно, чем раньше, и смотрят, как такие неоднозначные вещи выполнены в других браузерах. Вполне возможно, что после выхода FF4 и IE9 (вышли, то они недавно)другие браузеры исправятся.

[SelenIT]

Сейчас вроде прописано:

5.3. Обрезка углов

Фон бокса (но не его border-image) обрезается по соотв. кривой (как задано через ‘background-clip’). Другие эффекты обрезки по границе бордера или паддинга (напр. ‘overflow’, отличное от ‘visible’) тоже должны обрезаться по кривой. Содержимое замещаемых элементов всегда обрезается по закруглению границы контента.

Так что можно смело писать в трекер и поднимать приоритет бага, насколько можно.

[psywalker]

Содержимое замещаемых элементов всегда обрезается по закруглению границы контента.

Дружище, а можно вот тут поподробнее плиз

[SelenIT]

Честно говоря, тут я сам плохо понимаю. На мой взгляд, масло масляное какое-то написано. Видимо, это для случаев, когда, например, у картинки есть закругленный border и padding, то обрезка всегда будет идти по внутренней границе padding-а, т.е. краю самой картинки, а она-то не закруглена... получается, закругление border-а на углы картинки вообще не должна влиять, что ли (хотя практика подтверждает этот невеселый вывод)? Если так, возможно, для картинок придется ждать padding-radius или content-radius в каком-нибудь CSS5...

[psywalker]

Честно говоря, тут я сам плохо понимаю. На мой взгляд, масло масляное какое-то написано. Видимо, это для случаев, когда, например, у картинки есть закругленный border и padding, то обрезка всегда будет идти по внутренней границе padding-а, т.е. краю самой картинки, а она-то не закруглена... получается, закругление border-а на углы картинки вообще не должна влиять, что ли (хотя практика подтверждает этот невеселый вывод)? Если так, возможно, для картинок придется ждать padding-radius или content-radius в каком-нибудь CSS5...

Погоди, но ведь для картинок вроде вообще не пашет border-radius, т.е. такая запись не прокатит img{-moz-border-radius: 20px;} ? Или прокатит?

[SelenIT]

Если я хоть что-то понимаю, именно из-за этой оговорки в спеке оно и не пашет.

[psywalker]

Если я хоть что-то понимаю, именно из-за этой оговорки в спеке оно и не пашет.

Понял. Жаль конечно. Надеюсь эта оговорка измениться в скором будущем. Ведь очень полезная штука уголки у картинки закруглять.

Кстати, а ведь дело не только в картинке. И вложенные дивы например тоже вылазят на ружу.

.test
{
        border: 5px solid #123;
        overflow: hidden;
        background: #555;
        width: 100px;
        height: 100px;
        border-radius: 20px;
}

.test-inner
{
        overflow: hidden;
        background: #621;
        width: 55px;
        height: 55px;
}

<div class="test">
        <div class="test-inner"></div>
</div>

[hf3]

не прокатит img{-moz-border-radius: 20px;} ? Или прокатит?

В ие 9 прокатит. И в фф4 уже тоже (без префикса) - исправили. И в хроме. В опере нет.

[SelenIT]

Хех, а спеку-то они все, оказывается, все нарушают (про IE9 только не знаю — не под рукой сейчас). Background-clip нигде эффекта не дает. В FF всегда будто бы padding-box (режет по внутренней границе бордера), в Хроме — border-box (по внешней), и никакие стили этого не меняют...

А про картинки я, выходит, понимал неправильно. Похоже, разработчики браузеров поначалу тоже

[psywalker]

В ие 9 прокатит. И в фф4 уже тоже (без префикса) - исправили. И в хроме. В опере нет.

Хорошая новость, спасибо.