解决方案IE8不支持使用CSS pie.htc边框

渐变梯度

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

仍然没有介绍，请自己尝试.

添加代码后没问题

请务必添加此属性

 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'); /*路径要写绝对路径*/
}

这些转移

Z-index相关问题

IE中这些CSS3效果的实现是使用VML绘制带有圆角的容器元素或来自VML的投影效果. 然后，将此容器元素插入为目标元素的后同级节点. 如果目标元素是position: absolute或position: relative，则css3-container元素将设置为相同的z-index值. 在DOM树中ie8不支持属性border-bottom，处于同一级别的元素始终覆盖前一个元素，因此可以实现覆盖，并避免了将另一个元素完全插入到其中的可能性.

因此，问题来了. 如果当前元素的position属性是静态的（默认属性），则z-index属性是无用的ie8不支持属性border-bottom，并且完全没有覆盖范围，因此IE下的CSS3渲染将不会成功. 解决这个问题也很简单，设置目标元素的位置: relative或设置祖先元素的位置: relative并分配z-index值（不是-1）.

等效路径问题

与其他CSS属性不同，Internet Explorer的行为属性与HTML文档有关，而不与CSS文档有关. 这使得使用pie.htc文件变得微不足道. 如果绝对路径在根目录中，则CSS文件不方便移动；如果相对路径在HTML文档中，则将大大降低pie.htc文件在不同HTML页面中的可重用性. 同时，URL路径（例如边框图像）不容易处理.

缩写问题

使用PIE在IE中实现CSS3渲染（其他方法也是如此）. 您只能使用缩写形式，例如圆角. 我们可以设置border-top-left-radius来指示左上角的圆角. 这种书写方式只能是诚实的缩写.

提供正确的内容类型

要使IE浏览器支持HTC文件，您需要带有“ text / x-component”的content-type标头，否则行为将被忽略. 大多数Web服务器提供正确的内容类型，但是有些有问题. 例如，我的太空域名业务不具有“文本/ x组件”的内容类型，这可能是出于安全考虑.

如果您发现计算机上的PIE方法无效，即此处的htc文件意味着pie.htc文件无效，请检查您的服务器配置，它可能需要更新为最新的内容类型. 例如，对于Apache，您可以在.htaccess文件中执行以下操作:

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-152025-1.html