CSS3 и PIE не работают в IE 8 - PullRequest
Новая
       8

CSS3 и PIE не работают в IE 8

16 голосов
/ 11 января 2011

Я пытаюсь продемонстрировать CSS3PIE, и он вообще не будет работать в IE.

HTML: 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <link href="test.css" type="text/css" rel="stylesheet">
  <title>Test</title>
  </head>
  <body>

    <div id="title"></div>
    <div id="sub_title"></div>
    <div id="main_area">
      <div id="date_area"></div>
    </div>

  </body>
</html>

CSS: 

body{
 margin: 0 auto;
}

#title{
 margin: 0 auto;
 width: 100%;
 height: 40px;
 background-color: white;
}

#sub_title{
  margin: 0 auto;
  width: 100%;
  height: 25px;
  background-color: green;
}

#date_area{
  width: 310px;
  height: 250px;
  border: 1px solid #4A4949;
  padding: 60px 0;
  text-align: center; 
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: #707070 2px 2px 4px;
  -moz-box-shadow: #707070 2px 2px 4px;
  box-shadow: #707070 2px 2px 4px;
  background: #EBEBEB;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDEBEB), to(#C9C7C8));
  background: -moz-linear-gradient(#EDEBEB, #C9C7C8);
  background: linear-gradient(#EDEBEB, #C9C7C8);
  -pie-background: linear-gradient(#EDEBEB, #C9C7C8);
  behavior: url(/PIE.htc);  
}

В результате получается блок с рамкой, без градиента / тени и т. Д.

Любая помощь / решение будет высоко ценится.

Ответы [ 6 ]

34 голосов
/ 12 января 2011

Местоположение behavior должно быть относительно вашего HTML-файла, а не вашего CSS, как любое другое объявление, использующее url(). Итак, предположим, что ваши index.html и PIE.htc находятся в корне, а ваш CSS находится в папке 'css', вы должны сделать следующее: 

background-image: url(../images/example.jpg);
behavior: url(PIE.htc);

Также попробуйте добавить файл .htaccess со следующим содержимым в том же месте, что и файл PIE.htc: 

AddType text/x-component .htc

Надеюсь, это поможет.

14 голосов
/ 14 января 2011

Попробуйте добавить 

position:relative;
z-index: 0;

, как предлагается здесь http://css3pie.com/forum/viewtopic.php?f=3&t=10

Этот вопрос похож на тот, который был опубликован здесь: CSS3 PIE - не работает поддержка IE border-radius

4 голосов
/ 13 декабря 2011

добавление: AddType text/x-component .htc - в файл .htaccess для меня это сработало.

Сокращенное свойство CSS позволяет вам контролировать, какие углы округлять или нет.

border-radius: 0 15px 15px 0;/*(top-left, top-right, bottom-right, bottom-left). */

4 голосов
/ 12 января 2011

CSS3 PIE - Предоставление поддержки IE пограничного радиуса не работает?

Запросы PIE.htc должны отвечать типом mime "text / x-component" - иначе IE не будет касаться поведения.

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

Попробуйте очистить кеш в вашем браузере.Особенно когда вы переключаетесь между режимами совместимости.Это действительно помогает

0 голосов
/ 12 января 2011

Убедитесь, что у вас последняя бета-версия.Если файл HTC все еще вызывает проблемы, попробуйте реализацию JS.

...