用css pie.htc解决IE8 不支持 border-radius 属性问题（圆角）

时间：2024-05-20 12:06:36

css pie.htc使用心得（解决IE8以及一下不能设置圆角问题）

用css pie.htc解决IE8 不支持 border-radius 属性问题

一、效果、demo、下载地址

二、PIE支持的主要CSS3属性详解

  1. border-radius圆角

css代码:

 .node2 {
  background-color 		: #c0bffb;
  width                 : 289px;
  height                : 40px;
  z-index 				: 10;
  border: 0px solid #b9aed9;
  
  /*以下下是要添加的PIE.htc代码*/
  position:relative; /*一定要加，否则不显示。注意：父类也要添加相同属性，否则会错位，下面会详细介绍*/ 
  border-radius: 15px; /*这个不能删，虽然IE8不支持这个属性，但是PIE.htc会用到*/
  -webkit-border-radius: 15px; /*以下这两个是PIE.htc设置圆角的属性*/
  -moz-border-radius: 15px;
  behavior: url('/theme/css/zzjg/PIE.htc'); /*路径要写绝对路径*/
}

在IE8下效果：
用css pie.htc解决IE8 不支持 border-radius 属性问题（圆角）

  1. box-shadow 盒阴影

css代码：

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;

/*以下是PIE的代码*/
-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);

这里不做详细介绍，具体效果可以去上边的网址尝试

  1. gradient渐变

css代码：

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
background: #EEFF99;

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(pie.htc);

依旧不做介绍，自己去尝试。

三、问题

  1. 添加完代码不显示问题

一定要加这个属性

 position:relative; /*一定要加，否则不显示，注意：父类也要添加相同属性，否则会错位，下面会详细介绍*/
  1. 滚动，背景图标与文字错位问题
    效果：
    用css pie.htc解决IE8 不支持 border-radius 属性问题（圆角）
    原因：
    要在此方法的父类设置 position:relative; 和 z-index : 99;
    具体css代码：
/*父类*/
#chart{
  width : 1500px;
  margin : auto;
  margin-top : 40px;
  padding : 40px;
  
  /*千万不能遗漏，否则滚动页面，背景图标和文字错位*/
  position:relative;
  z-index : 99;
}
/* 子类 */
.otChart .node {
  background-color : #c6e7ca;
  z-index : 10;
   
  /*以下下是要添加的PIE.htc代码*/
  position:relative; /*一定要加，否则不显示，注意：父类也要添加相同属性，否则会错位，下面会详细介绍*/ 
  border-radius: 15px; /*这个不能删，虽然IE8不支持这个属性，但是PIE.htc会用到*/
  -webkit-border-radius: 15px; /*以下这两个是PIE.htc设置圆角的属性*/
  -moz-border-radius: 15px;
  behavior: url('/theme/css/zzjg/PIE.htc'); /*路径要写绝对路径*/
}

四、其他从网上找的总结

这些转自https://blog.****.net/clh604/article/details/11475783

  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）。

  1. 相当路径的问题
    IE浏览器的behavior 属性是相对于HTML文档而言的，与CSS其他的属性不一样，不是相对于CSS文档而言的。这使得使用pie.htc文件不怎么方面。如果绝对路径于根目录，则CSS文件不方便移动；如果相对路径与HTML文档，则pie.htc文件在不同HTML页面见的重用性大大降低。同时，诸如border-image后面的URL属性路径也不好处理。

  2. 缩写的问题
    使用PIE实现IE下的CSS3渲染（其他方法也是一样），只能使用缩写的形式，例如圆角效果，我们可以设置border-top-left-radius表示左上圆角，但是PIE确实不支持这种写法的，只能是老老实实的缩写。

  3. 提供正确的Content-Type
    要想让IE浏览器支持htc文件，需要一个有着”text/x-component” 字样的content-type 头部，否则，会忽视behavior。绝大数web服务器提供了正确的content-type，但是还有一部分则有问题。例如的我的空间域名商就没有”text/x-component” 字样的content-type，可能是出于安全的考虑。

如果您发现在您的机子上PIE方法无效，也就是htc文件这里指pie.htc文件无效，检查您的服务器配置，可能其需要更新到最新的content-type。例如对于Apache，您可以在.htaccess文件中左如下处理

相关文章