Блог Сергея Байдачного

Мой блог о технологиях

«Почему не работает гребаный border-radius» или Накипело.

4 комментария

 

Коллеги, хочу сразу отметить, что все примеры в своих статьях я пишу лично. Согласен, что выглядят они туповато, но вставлять кусок кода в статью, не проверив его… Картинки я также НЕ рисую в Paint.

К чему это я. Ах да, некоторое время назад писал пост о возможности работы с border-radius. Как ни странно, Internet Explorer 9 единственный браузер, который правильно работает с данными атрибутами. Если же говорить об IE 10, то мы обогнали всех. Достаточно посмотреть на результаты тестов: http://samples.msdn.microsoft.com/ietestcenter/. Как видно, основные конкуренты остались позади. Но я более чем уверен, что они догонят IE 10 в самое ближайшее время, а, следовательно, эра HTML 5 началась. И это очень здорово! Хотя и удивляет то, что конкуренты особо и не чухались, до появления поддержки HTML 5 в IE. Ведь декларация поддержки HTML 5 идет не первый год, а кроме video элемента толком ничего и не было.

Я опять отвлекся от темы. Так вот, прошло уже около года с момента публикации моего поста, а я до сих пор получаю гневные сообщения о том, что не работает border-radius в IE 9. Это конечно не так. Просто нужно быть внимательнее к тому коду, который Вы пишите. Если у меня что-то не получается, то я первым делом ругаю себя, а потом кого-то еще. Обычно нахожу ошибку именно у себя.

Что касается border-radius, то основная ошибка, которая тут возникает, это запуск страницы в режиме совместимости:

1). Проверьте, что страница декларирует использование HTML 5 с помощью элемента <DOCTYPE html>. В противном случае контент будет рассматриваться как HTML 4.x, а, следовательно, border-radius работать не будет;

2). Проверьте meta элементы на Вашей странице. Не переводят ли они браузер в режим совместимости? Возможно, Вы сами включили режим совместимости при тестировании других возможностей, нажав соответствующую кнопку возле строки-адреса страницы.

Иными словами, Internet Explorer позволяет отображать не только сайты, использующие все самые последние рекомендации, но и поддерживает ряд режимов совместимости, в которые можно принудительно переводить Ваши сайты, не модифицируя код.

Изучите предметную область, а потом делайте выводы.

А я начну писать статьи по HTML 5. Самое время.

Реклама

Written by Sergiy Baydachnyy

06.09.2011 в 17:50

Опубликовано в Internet Explorer 9

Tagged with

комментария 4

Subscribe to comments with RSS.

  1. Еще я столкнулся с «Режимом документов» в IE9. По умолчанию, если специально не указывать — стоит «Совместимый», т.е. CSS и разметка DOM — на уровне IE 6.
    Указывается так:
    Тогда отображается во всей красоте.

    Alexandr

    17.09.2011 at 06:12

    • Тэг обрезало немного… 🙂
      meta http-equiv=»X-UA-Compatible» content=»IE=9″
      Обрамляющие знаки для тэга не забудьте поставить…

      Alexandr

      17.09.2011 at 06:13

      • Что-то неполучается заставить работать border-radius в IE9, вышеприведённый meta тоже прописал для теста, доктайп html5, результат нулевой, везде работает, в IE9 нет.

        Дмитрий

        16.07.2012 at 02:39

  2. Нашёл причину. Когда указываю фильтр по градиентному фону для старших версий IE (filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f7a92d’, endColorstr=’#cf6517′,GradientType=0 );), в IE9 перестаёт работать border-radius для данного элемента. Баг или фича?

    Дмитрий

    16.07.2012 at 03:00


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: