Я искал похожие вопросы, связанные с border-radius в IE 11, но только один, найденный на сайте разработчиков Microsoft IE, описал, что я я также в настоящее время испытываю с "обновления" до IE 11. Ответ на сообщение в этом потоке состоял в том, чтобы удостовериться, что DOCTYPE был HTML5, а не Quirks.
В настоящее время я заканчиваю редизайн сайта и да, он HTML5 и имеет правильный DOCTYPE, но я все еще получаю странную проблему с граничным радиусом. Там смещение 1px почти для каждого элемента, где я применил граничный радиус. Если я сниму флажок border-radius, проблема исчезнет, и все будет в порядке, но это отнюдь не проблема в IE 9 или IE 10. Только с IE 11 несколько дней назад эта проблема возникла. Я тестировал как на Windows 7 с IE 11, так и на Windows 8.1 с IE 11, и проблема существует на обоих.
Пример 1:
У меня здесь есть border-radius: 5px 0 0 5px, а затем примените отдельные псевдоэлементы: before и: after, чтобы получить заостренный треугольник, но радиус границы, кажется, создает 1px белую линию, поэтому он больше не сбрасывается с остальным элемента. Это отлично работало даже в IE 8, но теперь оно сломано в IE 11. Если я удаляю граничный радиус, треугольник псевдоэлемента снова станет заподлицо с элементом.
Пример 2:
Кнопка ссылки <a>, отображаемая как встроенный блок, имеет линейный градиент для фона, синюю границу 1px и border-radius: 4px. Но радиус границы создает еще одну 1px белую линию внутри синей границы 1px. Независимо от любого другого значения радиуса границы, белая линия остается, если радиус границы не равен 0.
Пример 3:
Три элемента <a>, привязанные к display: inline-block внутри a <div>, расположенные относительно другого <div> ниже. Нижний <div> имеет border-radius: 4px, а элементы <a> в верхней части <div> имеют граничный радиус в верхнем левом и правом (показано). IE 11 отображает разрыв в 1px между двумя элементами <div> (как показано в другом потоке плакатов, указанном выше). Но если радиус границы внизу <div> установлен в 0, пробел исчезает.
Опять же, ни один из этих экземпляров не был проблемой в IE 9 и IE 10; только после того, как IE 11 имеет этот "1px gap" с элементами, имеющими пограничный радиус. Я не знаю, как это исправить. Конечно, никаких других браузеров не влияет. Firefox, Safari, Opera и Chrome все отлично отображаются.
Любая помощь будет принята с благодарностью.
