Підтримка «граничного радіусу» в IE

158

Хтось знає, чи / коли Internet Explorer буде підтримувати атрибут CSS "радіус кордону"?

internet-explorer css

220

Так! Коли IE9 виходить у січні 2011 року

Скажімо, вам потрібно рівне 15 пікселів з усіх чотирьох сторін:

.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 тобто9:

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

Деякі ліниві розробники є <meta http-equiv="X-UA-Compatible" content="IE=7" />. Якщо цей тег існує, радіус межі ніколи не працюватиме в IE.

— Кевін Флорида
джерело

7

Імовірно, якщо ви не використовуєте мета-тег X-UA-сумісний, вам не потрібно його додавати лише для того, щоб він працював у IE9?

— thepeer

72

Вам слід поставити версію префікса постачальника ПЕРШУ та стандартну ОСТАННУ, так що якщо браузер підтримує фактичний стандарт, він використовуватиме його замість своєї префіксованої версії постачальника.

— Джейсон Беррі

4

Правильно вам не потрібен метатег .. вам потрібно замінити емулятор ie7 лише якщо він включений. Інакше не хвилюйся.

— Кевін Флорида

3

FYI у поточному бета-версії IE9 'межа-радіус' працює належним чином, використовуючи одне значення. Усі чотири значення не потрібно, якщо ви дійсно не хочете, щоб вони були різними.

— mikemaccana

2

@nailer: Дякую за оновлення кутів. Перша альфа-та бета-версія IE9 вимагала оголосити всі 4 кути. Щойно я завантажив останню версію ie9 RC, і це дозволяє мені оголосити одне значення .. Не впевнений, коли це змінилося ..

— Кевін Флорида,

46

Відповідь на це питання змінилася з того часу, як його задали рік тому. (Це питання на даний момент є одним з найкращих результатів для Googling "межі радіуса, тобто".)

IE9 підтримуватиме border-radius.

Доступний попередній перегляд платформи який підтримує border-radius . Для запуску попереднього перегляду вам знадобиться Windows Vista або Windows 7 (і IE9).

— Девід Джонстоун
джерело

27

Поки ви чекаєте .. Вигнутий кут (радіус межі) перехресного браузера

— Луїс Мелгратті
джерело

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 вмирав де-небудь. Хтось вбиває IE

— Starx

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

Швидке виправлення полягає в загортанні його в інший елемент. Надайте батьківському елементу той самий радіус кордону та встановіть його переповнення прихованим.

— Сенне

1

РЕШЕНО - неправильно відображати радіус межі в IE 10 та 11

Для тих, хто не отримує -ms-border-radius: або border-radius: для роботи в IE 10,11, і він робить весь квадрат, а потім виконайте наступні кроки:

Клацніть на редукторі вгорі праворуч від браузера IE
Клацніть на налаштуваннях перегляду сумісності
Тепер зніміть прапорці з двох полів, які встановлені за замовчуванням.

Переконайтесь, що поля не встановлені, як на малюнку

— Аллан Старр
джерело