I'm trying to use PIE.htc, which is a script which hopefully will allow me to use CSS3 features in IE6-8. I'm also using Cakephp (which I'm growing to love)
According to the instructions I just stick the PIE.htc file anywhere I want to and then add behavior: url(path/to/PIE.htc);
to the CSS. So I have:
input[type=text]{
开发者_运维知识库 width:348px;
height:30px;
border:1px solid #ddd;
padding:3px;
background:url(../img/formfieldbg.gif) repeat-x;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
vertical-align:top;
behavior: url(path/to/PIE.htc);}
It also says: Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
I'm using Cakephp and no matter what I put for the path and no matter where I place the PIE.htc file I can't make it work! When I view it in IE6 my inputs still don't have the lovely rounded corners like they do in FF.
Try using an absolute path:
behavior: url(/path/to/PIE.htc);
Note the leading forward slash. This way, no matter what the current page is, the path to the .htc
file will remain the same.
A full URL will work too:
behavior: url(//example.com/path/to/PIE.htc);
If you do use a full url, use a protocol relative url so you don't get insecure content warnings when switching to https.
A lot of elements need position:relative
or zoom:1
when using PIE in order to behave in IE, make sure you check the known issues page and play around until you get it to work.
You need to specify the pie.php file. Its content is like below:
<?php
/*
This file is a wrapper, for use in PHP environments, which serves PIE.htc using the
correct content-type, so that IE will recognize it as a behavior. Simply specify the
behavior property to fetch this .php file instead of the .htc directly:
.myElement {
[ ...css3 properties... ]
behavior: url(PIE.php);
}
This is only necessary when the web server is not configured to serve .htc files with
the text/x-component content-type, and cannot easily be configured to do so (as is the
case with some shared hosting providers).
*/
header( 'Content-type: text/x-component' );
include( 'PIE.htc' );
?>
That should solve the issue.
I was using CodeIgniter with a mod_rewrite. Based on Septagram's answer I got the following to work
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
#if the url contains PIE.php redirect to the folder containing PIE.php
RewriteCond %{REQUEST_URI} PIE.php$
RewriteRule ^.*$ css3pie/PIE.php [NC,L]
#else just redirect to index
RewriteRule ^.*$ index.php [NC,L]
Hope this helps someone
If you happen to be using mod_rewrite
, than the following little hack might be for you:
RewriteRule /PIE.htc$ PIE.htc [L]
Add this to .htaccess
and voila! Now PIE.htc
is magically present in every folder :)
精彩评论