开发者

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

开发者 https://www.devze.com 2023-03-27 13:29 出处:网络
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)

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 :)

0

精彩评论

暂无评论...
验证码 换一张
取 消