Граница радиуса вызывает странное поведение в IE9, IE10 и IE11

этоскрипка дает ожидаемые результаты в реальных браузерах (я пробовал FF, GC, Safari), но неожиданно ломается в IE9, IE10 и IE11. Нет проблем с IE7 или IE8.


    Top
    Bottom

.root {
    background-color: red;
    position: absolute;
    height: auto;
    bottom: 0; top: 0; left: 0; right: 0;
    margin: 25px;
    border: 0;
    border-radius: 7px;
    overflow: hidden;
}

.footer {
    background-color: green;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
}

Если я удалюborder-radius или жеoverflow:hidden от родителя все отлично работает. Но какое отношение это имеет к ребенку с фиксированным положением? Предполагается, что он всегда располагается относительно области просмотра.

Это известная \ документированная ошибка? Что за этим стоит?

 Evgeny31 окт. 2012 г., 00:07
Скриншот слева. Зеленый нижний колонтитул, ширина 100% экрана, высота 100px.
 brentonstrine31 окт. 2012 г., 00:06
Можете ли вы описать ожидаемое поведение немного более четко?
 brentonstrine31 окт. 2012 г., 00:17
Очень странно. добавлятьborder-radius:30px в.footer и вы можете видеть, что изменяется только верхний левый угол - это потому, что как-то.root переворачивается и отсечения.footer (с полем закругленным углом!). Так что это объясняет, почему меняетсяoverflow влияет на это, но я понятия не имею, почему присутствиеborder-radius ломает это.

Ответы на вопрос(2)

Решение Вопроса

Вот что я думаю, что происходит.

Поставщики браузеров, похоже, решили, чтоfixed у элементов позиции, у которых переполнение, отключено отсечение, например, они естьне подрезаны их родителями. Это делает вещи последовательными, так какfixed элементы расположены относительно окна, а не родителя. Если применить отсечение, оно будет иметь положение / ширину относительноокно и отсечение относительнородитель, Было бывизуально смотреть лайкэтот (за исключением того, что нижние углы должны быть закруглены - подробнее об этом ниже).

Так:fixed элемент, без ограничения переполнения. Проверьте.

Но что-то изменилось в IE9. Они ввели поддержку закругленных углов. Теперь к тому, что я сказал о скругленном отсечении. IE9 действительно сделал это правильно. Многие браузеры прямо сейчас обрезают квадратные углы, даже если элемент имеет закругленные углы. Это плохо. По-видимому, IE9 исправил это, обнаружив наличие закругленных углов, и в таких случаяхперерисовка отсечения, Когда он делает это, он делает две ошибки.

Применяется отсечение - удаление "fixed элемент, без ограничения переполнения " править. Отсечение снова включается, и элемент теперь обрезается по ширине родительского элемента.

Отсечение просто помещается непосредственно в элемент, не по центру, безотносительно к тому факту, что отсечение должно исходить от родителя. Это's только что обрезается, начиная с 0,0 до указанной ширины и высоты - это 'Почему зеленый элемент выровнен по левому краю - правый / нижний 50px скрыты.

Исправления?Дон»т гнездоfixed внутриabsolute, (Лучшее решение - избегать странных крайних случаев в будущем)Дайте родителю (красный) div ширину.Гнездо новоеdiv прямо внутри.root и переместитьoverflow:hidden к этому.Пример скрипки. (Наименее навязчивый)

Была такая же проблема:


  ...
  
    ...
  
  ...

Исправлено настройкой.container положение в-ms-page

Ваш ответ на вопрос