From my experience, implementing PIE.htc can pose some challenges initially; however, once you work through a few obstacles and get accustomed to its behavior, it can prove to be quite beneficial. Many of my major clients still rely on IE7 and IE8.
Firstly, it's worth noting that PIE.htc doesn't do well with shorthand CSS. Here's how I would suggest declaring your attributes:
#prueba {
border: 1px solid #999;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}
Additionally, remember to include the behavior declaration in the <style> section of the page where it's being applied, like this:
<style type="text/css">
#prueba {
behavior: url("PIE.htc");
}
</style>
</head>
These steps should help resolve any issues you may encounter. Some key points to remember...
- Ensure that PIE.htc is located in the root directory of your site to avoid complications when accessing it from a folder.
Occasionally, calling the behavior might not work if the selector has a parent attribute. For instance, if #prueba is nested within another <div> such as #content, you would use:
#content #prueba {
behavior: url("PIE.htc");
}
- Personally, I place my PIE.htc call just before the closing
</head> tag for consistent functionality.
I hope these tips prove helpful. You can find more detailed information in the documentation available on css3pie.