Question

我正在使用pie.htc让我在旧版本的IE网站上拥有半径角和阴影。

问题是它似乎让IE运行非常缓慢。

以下是我的代码示例...有谁能看到我如何改进这个？

div.myDiv {
    -webkit-border-radius: 5px;    
    -moz-border-radius: 5px;    
    border-radius: 5px; 
    -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
    behavior: url(/PIE.htc);
}

Answer 1

我在项目中经常使用CSS3Pie，因为我被迫使网站看起来非常相似这对技术人员来说当然是无稽之谈，但不是销售人。

实际上，使用任何类型的.htc文件都非常慢，因为pie需要解析这些规则并根据VML-Elements创建以模拟相应的css3行为。如果你有更大的项目，你将别无选择：

完全省略IE8的CSS3功能（并说服您的salesguy）＆lt; - 我最喜欢的选项
省略馅饼并尽可能使用IE过滤器
使用更轻量级的框架，支持更少但处理速度更快，因为PIE（因为它具有如此极好的支持）相当臃肿，因而相当慢

使用像Razor建议的位置并没有真正解决速度问题而且使用-ms添加前缀可能会给IE9带来严重麻烦，试图同时使用css3pie和前缀css3属性。

Answer 2

尝试此更改

div.myDiv 
{
  border-radius: 5px; 
  -ms-border-radius: 5px;
  -webkit-border-radius: 5px;    
  -moz-border-radius: 5px;    
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
  -ms-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);      
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
  behavior: url(/PIE.htc);
  position:relative;
}

PIE.htc文件在准备好时与DOM一起异步加载。设置position:relative肯定会给你带来优势。我在代码片段中加上-ms-前缀，这有助于检测IE。它对我有用。我使用了最新的PIE.htc文件。

在IE8中，CSS Pie使页面加载速度非常慢

2 个答案: