Every single HTML developer knows that it’s really hard to make CSS styles to give the same render in every Internet browser ! Each browser has its own specifications : Chrome has webkit-, Safari does not, Firefox adds -moz … and IE 6/7/8 has nothing !
The IE solution : PIE.htc
The solution I give here has been developed to support CSS3 over IE platforms. To do so, we use a CSS functionality of IE to execute JavaScript, which will recreate CSS3 styles.
Installation
You just have to add a single line to your CSS style to make it work with IE.
- <style type="text/css">
- .rounded-corner5
- {
- -webkit-border-radius: 5px; /* Chrome */
- border-radius: 5px; /* CSS3 */
- -moz-border-radius: 5px; /* Mozilla */
- behavior: url(PIE.htc); /* Internet Explorer */
- }
- </style>
Usage example
This is a div object with rounded corners, without using CSS3
Troubleshooting : a few rules to follow
There are two main issues you will/might face off :
- Mime-type : by default under linux, the .htc file is recognized as text/html, but should have text/x-component mime to be considered by IE. Some solutions, depending on what you can do on your server : change server /etc/mime.types configuration file to add the correct mime type, add the line
AddType text/x-component .htcto your global apache/local .htaccess configuration, or create a PHP file that will override de default mime usingheader('Content-type: text/x-component'). - Domain, path and rights : the CSS line will work only if the .htc file is on the same domain than the HTML web page. Moreover, CSS3 rules using url() argument with relative paths might be misunderstood.
French version : CSS3 sous Internet Explorer 6, 7 et 8 avec PIE.htc