Поддержка «border-radius» в IE

158

Кто-нибудь знает, будет ли Internet Explorer поддерживать CSS-атрибут border-radius?

internet-explorer css Тони Пони
источник

Ответы:

220

Да! Когда IE9 выпущен в январе 2011 года.

Допустим, вы хотите четные 15px со всех четырех сторон:

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9 будет использовать значение по умолчанию border-radius, поэтому убедитесь, что вы включили его во все ваши стили, вызывая радиус границы. Тогда ваш сайт будет готов к IE9.

-moz-border-radiusдля Firefox, -webkit-border-radiusдля Safari и Chrome.

Кроме того: не забудьте объявить, что ваша IE кодировка ie9:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Некоторые ленивые разработчики имеют <meta http-equiv="X-UA-Compatible" content="IE=7" />. Если этот тег существует, border-radius никогда не будет работать в IE.

Кевин Флорида
источник
7
Предположительно, если вы не используете метатег X-UA-Compatible, вам не нужно добавлять его только для того, чтобы он работал в IE9?
thepeer
72
Вам следует поместить версии префикса поставщика FIRST и стандарт LAST, чтобы, если браузер поддерживает действующий стандарт, он использовал его вместо версии с префиксом поставщика.
Джейсон Берри
4
Правильно, вам не нужен метатег ... вам нужно только заменить эмулятор ie7, если он включен. В противном случае, не беспокойтесь об этом.
Кевин Флорида
3
FYI в текущей бета-версии IE9 'border-radius' работает правильно, используя одно значение. Все четыре значения не обязательны, если вы на самом деле не хотите, чтобы они были разными.
mikemaccana
2
@nailer: Спасибо за обновление углов. Первая альфа против и бета против IE9 потребовала все 4 заявленных угла. Я только что загрузил последнюю версию ie9 RC, и она позволяет мне объявить одно значение .. Не уверен, когда это изменилось ..
Кевин Флорида
46

Ответ на этот вопрос изменился с тех пор, как его спросили год назад. (Этот вопрос в настоящее время является одним из лучших результатов для поиска в Google "border-radius ie".)

IE9 будет поддерживать border-radius.

Существует платформа предварительного просмотра доступны , который поддерживает border-radius . Вам потребуется Windows Vista или Windows 7 для запуска предварительного просмотра (и IE9, когда он будет выпущен).

Дэвид Джонстон
источник
18

Обходной путь и удобный инструмент:

CSS3Pie использует файлы .htc и свойство поведения для реализации CSS3 в IE 6 - 8.

Modernizr - это немного javascript, который помещает классы в ваш HTML-элемент, позволяя вам предоставлять разные определения стилей для разных браузеров в зависимости от их возможностей.

Очевидно, что оба они добавляют больше накладных расходов, но с IE9 из-за запуска только на Vista / 7 мы можем застрять на некоторое время. По состоянию на август 2010 года на Windows XP по-прежнему приходится 48% операционных систем веб-клиента.

Питер Г
источник
2
CSS3 PIE был безусловно самым простым и наименее навязчивым вариантом для этого.
Крис Раско
12

Это не планируется для IE8. Смотрите страницу совместимости CSS .

Помимо этого никаких планов не было выпущено. Ходят слухи, что IE8 станет последней версией для Windows XP

Бен С
источник
12
Вы, очевидно, ошибаетесь, потому что IE9 должен поддерживать CSS3, и я не вижу, чтобы IE где-то умирал. Кто-то,
пожалуйста,
10
Оказывается, IE8 - последняя версия ... для Windows XP.
М. Дадли
7

<!DOCTYPE html> без этого тега border-radius не работает в IE9, мета-теги не нужны.

JAVAC
источник
4

Используйте -ms-border-radius: 15pxлюбой элемент, который использует css -ms-, совместим с IE.

Яго Бруно
источник
2

Как насчет поддержки радиуса границы и градиента фона. Да, IE9 должен поддерживать их обоих по отдельности, но если вы смешаете их, градиент кровоточит из закругленного угла. Ниже приведена ссылка на плохой пример, но я видел это и в своем тестировании. Стоит сделать снимок экрана :(

Возможно, реальный вопрос в том, когда IE будет поддерживать стандарты CSS без собственных хаков MS-FILTER.

http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

SigmaBetaTooth
источник
IE10 будет поддерживать надлежащие CSS3-градиенты (текущий предварительный просмотр IE10-разработчика уже осуществляется через -ms-linear-Gradient). Если вы хотите использовать градиенты, соответствующие граничному радиусу в IE9, вам нужно использовать SVG (либо внешний SVG-файл, либо файл, который закодирован в URI данных) - см. Css3wizardry.com/2010/10/29/css-gradients-for- ie9 - также CSS3 PIE скоро автоматизирует это, доступна тестовая сборка
lojjic
Быстрое решение состоит в том, чтобы обернуть его в другой элемент. Присвойте родительскому элементу тот же border-radius и установите его переполнение скрытым.
Сен
1

Решено - неправильно отображается радиус границы в IE 10 и 11

Для тех, кто не получает -ms-border-radius: или border-radius: для работы в IE 10,11 И он рендерит всю площадь, тогда выполните следующие действия:

  1. Нажмите на шестерню в правом верхнем углу браузера IE
  2. Нажмите на Настройки просмотра совместимости
  3. Теперь снимите 2 флажка, которые установлены по умолчанию.

Убедитесь, что флажки сняты, как на картинке

Аллан Старр
источник