PIE CSS работает в IE9, но не в IE8

Для этого проекта я использую Tomcat 7 и настроил его на обслуживание htc с типом контента text/x-component

<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>
    ...
    <mime-mapping>
            <extension>htc</extension>
            <mime-type>text/x-component</mime-type>
    </mime-mapping>
</web-app>

По некоторым причинам, он работает в IE9 (градиенты, тени, закругленные углы), но не в IE8, вообще не видит никакого CSS3. В консоли разработчика в разделе styles/tracxe styles я вижу behavior но я не вижу ничего подобного -pie-background например. Это проблема?

Что может быть причиной, кажется странным, что он работает в IE9, но не IE8. Я не думаю, что мне нужны другие настройки или что-то подобное? CSS из 1 элемента:

#masthead {
  background: #0E0E0E;
  background: #0e0e0e;
  background: -moz-linear-gradient(center top, #7d7d7d 0%, #0e0e0e 100%);
  background: -webkit-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
  background: -o-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
  background: -ms-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
  background: linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
  -pie-background: linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
  behavior: url(/owmw/web/css/PIE.htc);
  height: 35px;
  border: 1px solid #000000;
  color: #FFFFFF;
  position: relative;
  text-align: center;
  margin: 0px auto;
}

Я использую IE10 в режиме совместимости IE8, это имеет значение?

1 ответ

Решение

Я тоже столкнулся с той же проблемой, и причиной моей проблемы было следующее:

  • Я использовал неправильное позиционирование для моего DIV элемент.
  • Я нацелился на неправильный путь в behavior,

Судя по вашему коду, проблема в том, что вы выбрали неверный путь.
behavior: url(/owmw/web/css/PIE.htc);

ИСПРАВЛЕНИЕ: Вместо этого попробуйте обратиться к файлу PIE.htc в папке css и сделать его похожим behavior: url(PIE.htc);
или же
использование behavior: url(owmw/web/css/PIE.htc);

Проверьте свойство поведения.

Я могу ошибаться, но это решило мою проблему.

Даже я пытался использовать behavior: url(../owmw/web/css/PIE.htc); но не сработало.

Из ваших комментариев, кажется, вы используете X-UA-Compatible как исправить, и это работает только через режим совместимости IE10.

!--  Force IE to use the latest version of its rendering engine -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Говоря IE использовать последнюю версию своего движка рендеринга на вашей странице. Incase, если ваш пользователь открывает браузер IE8? Это, безусловно, не удастся.

Вы можете проверить это в библиотеке MSDN.

Надеюсь, вы понимаете.

Другие вопросы по тегам