Поддержка «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, когда он будет выпущен).

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

27

Пока вы ждете .. Изогнутый угол (border-radius) кросс-браузер

— Луис Мелгратти
источник

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
источник

6

Быстрое обновление к этому вопросу, IE9 будет поддерживать границы радиуса в соответствии с: http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx

— simonrjones
источник

4

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

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

2

Вопрос с угловым радиусом IE решу.

http://kbala.com/ie-9-supports-corner-radius/

— джайа
источник

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 И он рендерит всю площадь, тогда выполните следующие действия:

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

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

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