2012-05-30 2 views
0

Я пытаюсь получить линейные градиенты для работы с CSS3Pie (v1.0) и IE9.CSS3Pie v1.0 - Нет градиентов в IE9, работает в IE8

Странно демо работает на CSS3Pie site с IE9, но с использованием того же CSS, что и на демо, не работает на моем сайте. Он работает с IE8, поэтому я знаю, что PIE работает и находится в правильном месте (чтобы проверить, он перестает работать, если я прокомментирую behavior: url(/css/PIE.htc);).

Вот CSS я использую:

.test { 
padding: 20px; 
text-align: center; 
width: 200px; 
height:100px; 
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius: 8px; 
-webkit-box-shadow: #666 0px 2px 3px; 
-moz-box-shadow: #666 0px 2px 3px; 
box-shadow: #666 0px 2px 3px; 
background: #FF7777; 
position:relative; 
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FF7777), to(#c40808)); 
background: -webkit-linear-gradient(#FF7777, #c40808); 
background: -moz-linear-gradient(#FF7777, #c40808); 
background: -ms-linear-gradient(#FF7777, #c40808); 
background: -o-linear-gradient(#FF7777, #c40808); 
background: linear-gradient(#FF7777, #c40808); 
-pie-background: linear-gradient(#FF7777, #c40808); 
behavior: url(/css/PIE.htc); 
} 

enter image description here

Я предпочел бы не использовать фильтры IE, так как демо, кажется, работает без них.

Я уже прочитал this question, но так как демо работает, и этот вопрос составляет около года, а PIE теперь на версии 1.0, что я должен делать что-то неправильно.

Любая идея о том, куда идти дальше?

+0

попробуйте использовать абсолютный путь (с 'HTTP: // локальный /' и т.д.) и посмотреть, если он изменяет что-нибудь – mreq

+0

я считаю, что использование javascript для PIE работает лучше, чем использование реализации HTC. Но я использовал PIE только для поддержки радиуса границы. – Teddy

+0

Teddy: Это широкоформатный общедоступный сайт, поэтому повторное рендеринг после загрузки страницы вызывает некоторую озабоченность, к сожалению. –

ответ

2

Неисправность в IE9 обычно происходит из-за неправильного заголовка содержимого. Другие версии IE имеют эту проблему, но IE9, похоже, более строг. См. http://css3pie.com/documentation/known-issues/#content-type.

+0

Это в настоящее время обслуживается как: /css/PIE.htc GET \t 200 text/html 8.26 KB. Я дам ваше предложение попробовать. –

+0

lojjic: просто интересно, есть ли у метода заголовка PHP какие-либо недостатки. для загрузки? –

+0

Он не должен быть медленнее загружать как таковой, но он может не кэшироваться так же, как статический ресурс. – lojjic

0

У меня была большая головная боль, потому что даже с правильным заголовком содержимого (text/x-component) линейный градиент не работал на IE9.

Модернизация до PIE 2.0 решила проблему.

http://css3pie.com/2013/01/28/pie-2-0-beta-1-released

(То же awnser я дал в этом вопросе: linear-gradient using CSS3 PIE in IE9 not working, IE8 does)