[Introduction:] htc is Html Component (HTML component), which has been out for a long time, and is supported by IE5 and above. Common behaviors can be defined for some html components with common behaviors. One is that the code is clean, and the other is that the code can be shared. However, I have not used it in a large area. Because this thing can only be supported by IE.
【introduction】
IE uses VML vector markup language as a brush to draw rounded corners: download a compressed package ie-css3.htc, which contains a Microsoft script file (11KB) and an HTML file to test whether the server has the correct Content-Type , .htc file is a script file used to describe such behavior after IE kernel supports Web behavior. They define a set of methods and properties that programmers can apply to almost any element on an HTML page
【shortcoming】
There are many deficiencies in compatibility with IE, and the introduction of .htc files can solve many CSS3 problems, such as border shadows. However, the color cannot be adjusted and the inner and outer shadow effects cannot be set;
There is another way of writing for IE:
filter: progid (process id): DXImageTransform (DX image transformation). Microsoft (Microsoft).Shadow (shadow) (color='#969696', Direction=135 Shadow Angle, Strength=5 Shadow Radius);/*for ie6,7,8*/
The disadvantage is obvious, that is, the shadow of a certain side cannot be set separately and the inner and outer shadow effects cannot be set;
[Working principle:] IE browser uses a specific vector drawing language script (VML) to rebuild CSS3 properties (such as shadows and chamfers, etc.) that are not supported by itself. After all, this is a JS-like script, and the behavior is specific The content is defined in the .htc file. A set of methods and properties are defined by a script file with a suffix named .htc, and programmers can apply these methods and properties to almost any element on an HTML page.
Earlier I said that .htc (PIE.HTC or ie-css3.htc) can solve the compatibility problem of IE's border-radius border and rounded corners. Here are other functions, so which css3 properties can .htc enable ie to support
IE 6,7,8 supports some CSS3 properties. And .htc, it allows IE browser to support CSS3 border-radius, box-shadow, border-image, CSS3 Backgrounds (-pie-background), Gradients, RGBA properties.
Tip: The PIE.htc URL path is relative to the current HTML file, not the CSS file.
For example, the current file is under "/", the CSS file is under "/CSS", and PIE.htc is under "/CSS", behavior: url(/css/PIE.htc) instead of behavior: url(PIE.htc);
Note: htc can only be used on IE browsers (above IE 5.5) and is not supported on Firefox browsers
[Source Composition]: Introduced in Microsoft(R) Internet Explorer 5, HTML Components (HTCs) provide a mechanism to implement component functionality using scripting as Action HTML (DHTML) behavior. Saved with the .htc extension, an HTC copy is an HTML file that contains scripts and a set of HTC-specific elements that define components. This section contains related elements and the members they support.
【Object】
document renders an HTML document in a given browser window.
element returns a reference to the tag of the link behavior in the main document.
【method】
createEventObject
Creates an event object that the event uses when passing additional information about the event to the fire method of the PUBLIC:EVENT element.
【event】
uncontentready
Occurs when the content of the element to which the behavior is attached is completely parsed.
uncontentsave
Occurs before the content of an element that is connected to an element behavior is saved or copied.
ondetach
从一个元素解除一份行为的连接前发生。
ondocumentready
当包含行为的文档完全被解析时发生。
1.下载ie-css3.htc
2.应用：以下为应用
一、border-radius 圆角
.radius{
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(/PIE.htc); /* 可以让IE 6,7,8模拟部分的CSS3属性 */
}
说明：不支持单边的圆角属性，比如： border-top-left-radius，但是你可以这样来写：
border-radius:上，右下，左。
二、box-shadow 盒子阴影
border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px; background: #EEFF99; behavior: url(/PIE.htc);/* 可以让IE 6,7,8模拟部分的CSS3属性 */
说明：不支持text-shadow(文本阴影)
三、border-image 图片边框
color: white; border: 8px solid #013D7A; -webkit-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-image: url(img/border.png) 8 8 8 8 stretch; -moz-border-image: url(img/border.png) 8 8 8 8 stretch; border-image: url(img/border.png) 8 8 8 8 fill stretch; behavior: url(PIE.htc);
四、CSS3 Backgrounds 背景渐变
.gradient{
background: #CCC; /*fallback for non-CSS3 browsers*/
background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
-pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
behavior: url(PIE.htc);
}
说明：只支持linear-gradient（线性渐变）
高级运用：
background-size: 50px; background-color: #0ae; background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); -pie-background: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px #0ae; behavior: url(/PIE.htc);
五、RGBA 颜色值
.rgba{
padding: 60px 0;
background: #000;
background: rgba(0,0,0,.2);
-pie-background: rgba(0,0,0,.2);
}
说明：不支持box-shadow
六、IE6 png 透明
.png img{
-pie-png-fix: true;
behavior: url(/PIE.htc);
}
.png{
background-image:url(img.png);
-pie-background:url(img.png);
behavior: url(/PIE.htc);
}
说明：图片直接用-pie-png-fix: true，背景图片使用-pie-background来修复IE6下png透明的问题
【已知的一些问题】
此方法并不是万能的，也有一些局限性和需要注意的地方，常见问题：
1、层相互重叠（z-index相关问题）
问题来源：
IE下这些CSS3效果实现是借助于VML，由VML绘制圆角或是投影效果的容器元素，然后这个容器元素作为目标元素的后兄弟节点插入，如果目标元素position:absolute 或是 position:relative，则这个css3-container元素将会设置与之一样的z-index值，在DOM tree中，同级的元素总是后面的覆盖前面的，所以这样就实现了覆盖，又避免了可能有其他元素正好插入其中。
所以，问题来了，如果目前元素的position属性为static，也就是默认属性，则z-index属性是没有用的，无覆盖可言，所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单，设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值（不可为-1）。
有两个简单的解决方法：
①设置更大一些的z-index值
②利用绝对定位position:relative 或 position: absolute
2. 相当路径的问题
IE浏览器的behavior 属性是相对于HTML文档而言的，与CSS其他的属性不一样，不是相对于CSS文档而言的。这使得使用pie.htc文件不怎么方面。如果绝对路径于根目录，则CSS文件不方便移动；如果相对路径与HTML文档，则pie.htc文件在不同HTML页面见的重用性大大降低。同时，诸如border-image后面的URL属性路径也不好处理。
3、布局可能有轻微的变形或浮动。
可能有这几个原因：
可是是你的标签没闭合，至少是包含IE-CSS3元素的标签没闭合
IE6和IE7 bug问题。CSS添加属性 zoom:1 或 position:relative 。或者将margin值用padding值达到同等效果。
4、IE提示脚本错误
常出现在IE6浏览器中，原因是和你添加的别的js冲突了。解决方法：
调整你的js使之兼容。
放弃这个方法，采用背景图片或者IE6-IE8不用这个特效（IE9、火狐和谷歌等才用这个特效）。
5. 缩写的问题
使用PIE实现IE下的CSS3渲染（其他方法也是一样），只能使用缩写的形式，例如圆角效果，我们可以设置border-top-left-radius表示左上圆角，但是PIE确实不支持这种写法的，只能是老老实实的缩写。
6.提供正确的Content-Type
要想让IE浏览器支持htc文件，需要一个有着”text/x-component” 字样的content-type 头部，否则，会忽视behavior。绝大数web服务器提供了正确的content-type，但是还有一部分则有问题。例如的我的空间域名商就没有”text/x-component” 字样的content-type，可能是出于安全的考虑。
如果您发现在您的机子上PIE方法无效，也就是htc文件这里指pie.htc文件无效，检查您的服务器配置，可能其需要更新到最新的content-type。
.