Перейти к содержимому



IE 8 и CSS 3

#1 kokn

kokn
  • Пользователь
  • 14 сообщений
  • Репутация: 0
0

Отправлено 21 Февраль 2012 - 13:21

здраствуйте, может кто подскажет, как сделать в IE 8, чтобы отображалось свойство border-radius. Я как понимаю оно только в css3 есть!

 

 

  • 0

#2 Power

Power
  • Пользователь
  • 24 сообщений
  • Репутация: 0

Отправлено 21 Февраль 2012 - 13:54

Никак. Свойство border-radius в ИЕ появилось только с версии 9.
Если только все закругления сделать в виде изображений.
  • 0

#3 kokn

kokn
    Topic Starter
  • Пользователь
  • 14 сообщений
  • Репутация: 0

Отправлено 21 Февраль 2012 - 14:09

может как вариант окно сделать с прежупреждением типа на ИЕ 8 не корректно отображается и тп) так думаю проще будет) чем в коде перековыривать все)


  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 21 Февраль 2012 - 16:12

kokn, примерно так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>border-radius</title>
<style type="text/css">
.rounded {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
behavior: url(PIE.htc);
zoom: 1;
}
/*этот блок будем скруглять добавлением класса rounded*/
.demo_block {
float: left;
border: 1px solid #000;
padding: 1em;
background: #ccc;
}
</style>
</head>
<body>
<div class="demo_block rounded">этот блок будем скруглять добавлением класса rounded</div>
</body>
</html>
* Работает в IE6-9
* Свежую версию PIE.htc качаем тут: http://css3pie.com/
* Размер у PIE.htc около 40Кб так что подгрузку стиля с этим файлом (так же как не валидное css-свойство zoom: 1;) лучше выделить в отдельный файл и подключать условными комментариями, чтоб его грузил только ИЕ. Вроде такого
<!--[if IE]><link href="ie.css" rel="stylesheet" type="text/css"/><![endif]-->
Важно: следует понимать, что на данный момент CSS3 не является стандартом, т.е. поддержка CSS3 разными браузерами происходит как какому разработчику браузера в голову стукнуло так он это дело и реализовал, так что тот же самый border-radius в разных браузерах будет выглядеть несколько по-разному. И если требуется одинаковость отображения в разных браузерах (не только в ИЕ, но и в Хроме, ФФ и Опере), то надежнее скруглять углы картинками.
  • 1

#5 Power

Power
  • Пользователь
  • 24 сообщений
  • Репутация: 0

Отправлено 23 Февраль 2012 - 14:57

Решил попробовать PIE.htc, но почему-то на IE не работает. Пробовал в режиме 7-8 эксплорера, но все без толку. Зато в программа IETester все отлично работает, как надо)

Почему так?
  • 0

#6 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 23 Февраль 2012 - 17:55

Power,
если не работает значит, вы где-то напортачили: этот плагин известный и широкоиспользуемый.
Рассказывайте подробнее что, где и как делаете. Потому как фраза "пробовал в режиме 7-8 эксплорера" — ни о чем: что пробовали и как, что за "режим 7-8 эксплорера", кто в этом режиме был и зачем — не ясно.
Про IETester ничего сказать не могу: у меня разные версии IE живут в виртуальных машинах и выше приведенный пример нормально работает:
11e958034978.png
На всякий случай, распространенные подводные камни:
* указывается неверный путь к файлу PIE.htc (относительный путь к PIE.htc нужно указывать относительно текущего html документа)
* чтобы IE начал понимать behavior нужен правильный заголовок content-type: .htc файл должен передаваться с заголовком text/x-component. Большинство серверов по умолчанию имеют такую настройку, но бывают исключения. Для борьбы с подобными ситуациями в дистрибутиве PIE имеется PIE.php, его кладут в тот же каталог, что и PIE.htc, а вызов меняется на behavior: url(PIE.php);


  • 1

#7 Power

Power
  • Пользователь
  • 24 сообщений
  • Репутация: 0

Отправлено 23 Февраль 2012 - 20:32

yury, спасибо. Теперь все заработало)
  • 0


Оформление форума – IPBSkins.ru