1

我正在使用 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);
}
4

2 回答 2

2

我在项目中经常使用 CSS3Pie，因为我被迫让网站看起来完全一样，这对于技术人员来说当然是胡说八道，但不是销售人员。

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

  • 完全忽略 IE8 的 CSS3 功能（并说服你的销售人员）<-我最喜欢的选项
  • 尽可能省略饼图并使用 IE 过滤器
  • 使用支持较少但处理速度更快的更轻量级的框架，因为 PIE（因为它具有如此出色的支持）非常臃肿，因此相当慢

使用 Razor 建议的位置并不能真正解决速度问题，并且前缀 with-ms可能会给您在 IE9 中尝试同时使用 css3pie 和前缀 css3-property 带来严重麻烦。

于 2013-01-25T12:00:57.070 回答
0

试试这个改变

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罐头肯定会给您带来优势。i 代码片段中的前缀-ms-有助于检测 IE。它对我有用。我使用了最新的 PIE.htc 文件。

于 2013-01-25T11:49:45.033 回答