where do I put the PIE.htc file (for making IE work with CSS3) when I'm using cakephp

问题

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.

回答1:

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.

回答2:

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.

回答3:

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