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.
Надеюсь, вы понимаете.