Как загрузить пирог css3 только для ie7 и 8? Но не для 9 - PullRequest
Новая
       29

Как загрузить пирог css3 только для ie7 и 8? Но не для 9

2 голосов
/ 17 декабря 2011

Это CSS для использования PIE CSS3 

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
background: #EEFF99;
behavior: url(/PIE.htc);

Специально 

behavior: url(/PIE.htc);

Мой вопрос: будет ли этот PIE.htc загружаться всеми браузерами или только в IE 7 и 8?

Мне нужно показать угол в IE7 и 8 тоже.Поэтому я подумал, что вместо использования Modernizr и написания другого класса и изображения для круглого угла, CSS3 PIE будет хорошим решением, потому что всякий раз, когда мы будем менять цвет, толщину границы и высоту элемента, PIE.htc будет отображаться одинаково в IE7 и 8 без,но в случае с Modernizr и and image нам придется использовать загрузку нового изображения для нового, нам придется изменить и загрузить новое изменение.

И поскольку я использую Modernizr только для этого, я не могу загрузить его в условном режиме.комментарий он будет загружать для каждого браузера, даже если мне не нужно.Поэтому я подумал, что CSS3 PIE хорош для гибкости, и если он будет загружаться только в IE7 и 8, это будет хорошо для использования в этом конкретном случае.

1 Ответ

9 голосов
/ 17 декабря 2011

behavior не является допустимым свойством CSS и будет игнорироваться браузерами, отличными от Internet Explorer. Они не загрузят файл PIE.htc.

Вы упоминаете, что не можете загрузить в условный комментарий, но если вы можете использовать условные комментарии (?), То вы можете сделать следующий трюк: 

<!doctype html>
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
<head>

В этом случае вы используете условные комментарии, но не загружаете ничего внутри комментариев. Вы просто добавляете специфичный для браузера класс к <html> -элементу. Теперь вы можете сделать это в своем CSS: 

.some-class {
  border-radius: 12px;
}
.ie7 .some-class, .ie8 .some-class {
  behavior: url(/PIE.htc);
}
...