Jump to content
  • 0

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


Deadly
 Share

Question

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


.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 все хорошо 9fe2f1a7274d.png

в Opera и Chrome вылез угол d2647dfcafa9.png

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

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

Edited by Deadly
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

.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>

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy