Радиус границы / проблема переполнения в Chrome - PullRequest
Новая
       28

Радиус границы / проблема переполнения в Chrome

0 голосов
/ 23 сентября 2011

У меня есть сайт, который использует много границ радиуса для макета.Проблема сравнивается с рабочей версией (Firefox) на снимке экрана ниже (также я НЕ разработал эту ужасную вещь).

enter image description here

Весь код соответствует одному и тому же формату для границыradius: 

border-top-left-radius: 25% 54%;
border-bottom-left-radius: 19% 54%;

Единственное, что я вижу, это то, что border-radius серых полей ("main_area") фактически контролируется родителем, поэтому, возможно, серый фон переполняется.

Вот ссылка

Также обратите внимание, что такая же ошибка возникает в Opera.Я не использую префиксы, только вышеупомянутые CSS.Макет также хорошо в IE9.

Спасибо

1 Ответ

1 голос
/ 08 октября 2012

Размеры в процентах рассчитываются на основе размера шрифта по умолчанию, поэтому используйте таблицу стилей для сброса или добавьте размеры шрифтов в браузере для селекторов, использующих проценты, например: 

div#container > #main > #main_area > .content > .holder {
  font-size: 10px;
}

/* Firefox reset */
@-moz-document url-prefix() {
    div#container > #main > #main_area > .content > .holder {
    font-size: inherit;
    }
}

/* IE9 reset */
@media all and (monochrome: 0) { 
   div#container > #main > #main_area > .content > .holder {
    font-size: inherit;
    } 
}
...