Border-Radius неправильно выравнивается

Question

Я пытаюсь создать div с закругленными углами. Внутри этого div содержится дополнительный контент, который заполняет высоту этого div. Я заметил, что на каждом углу закругленного div есть некоторая визуальная коррупция. Мне кажется, что угол внешнего div слегка больше, чем внутренний div. Согласно моему коду, радиус границы обоих divs должен быть идентичным.

Пример вопроса: http://jsfiddle.net/MRZaF/4/

Изображение выпуска: http://imgur.com/Ph6IhLc

<div class="a-a"> 
    <div class="a-b">Content in here</div> 
</div> 
<br><br> 
<div class="b-a"> 
    <div class="b-b">Content in here</div> 
</div> 

div.a-a { background:red; border-radius:10px; width:400px; } 
div.a-b { background:aqua; border-radius:10px; height:200px; } 
div.b-a { background:red; border-radius:10px; width:400px; overflow:hidden; } 
div.b-b { background:aqua; width:400px; height:200px; } 

Answer 1

Есть несколько вариант, чтобы сделать это.
Первый вариант: Слегка увеличить границы радиуса родительского контейнера

div.a-a 
{ 
    background:red; 
    border-radius:13px; 
    width:400px; 
} 

Второй вариант: Удалите границы радиуса от родительского элемента и просто использовать его для дочернего элемента и установить фон нет.

div.a-a 
{ 
    background:none; 
    width:400px; 
} 

JS Fiddle Demo

Answer 2

Не ставьте его под положить его сверху, и вы не получите это.

div.a-a {background: red; границы радиус: 10px; ширина: 400px; } div.a-b {фон: aqua; границы радиус: 10px; высота: 200px; }

div.b-a {background: red; границы радиус: 10px; ширина: 400px; переполнение: скрытый; } div.b-b {фон: aqua; границы радиус: 10px; ширина: 400px; высота: 200px;}

jsfiddle.net/MRZaF/5/

Answer 3

ПРИМЕЧАНИЕ: Больше некоторой дополнительной погрешности прослеживания, чем ответ & +1 за интересный вопрос

Да, вы правы. Существует некоторая минимальная коррупция, по крайней мере, довольно заметная, когда вы смотрите на нее в браузере со 100% уровнем масштабирования. Однако, чем больше вы увеличиваете масштаб, тем меньше ошибка; на 500%, например, 1/10 пикселя. Ваш css правильный, поэтому я предполагаю, что это должна быть проблема с браузером. Я не сразу обнаружил в нем проблему с ошибкой в ​​списке ошибок хром https://code.google.com/p/chromium/issues/list.

Однако, если вы действительно хотите скрыть эти перекрывающиеся углы, вы все равно можете обходным путем, установив margin: -0.6px -0.6px; и width: parents width + margin*2 для ребенка. Я не знаю, может быть, экран имеет значение, а также поле ошибки. И обходные пути Сачина тоже работают, конечно.

Я обновил ваш тестовый пример: http://jsfiddle.net/MRZaF/7/ с различными значениями для отслеживания поля ошибки. Похоже, что при просмотре в браузере на 100% разница составляет около 0.5px от «реального» позиционирования, тогда, когда вы увеличиваете масштаб до 500%, он становится уже и уже.