在IE8中模拟css3样式

时间:2012-02-15 14:53:06

标签: jquery css browser-detection css3pie browser-feature-detection

我有一个使用各种CSS3样式的网站,它们只在Firefox 10中进行了测试。我需要一些方法来模拟在IE8中查看时本身不支持的各种CSS样式:

  • box shadow
  • text shadow
  • 背景渐变
  • 圆角
  • 不透明度

我尝试过使用css3pie,但是当我加入.htc文件时,会产生一些令人不快的副作用。我知道有些jQuery插件可以在IE8中为元素添加框阴影和圆角,所以我考虑在条件代码块中使用它们,例如。

if ($.browser == 'msie' && $.browser.version.split('.')[0] < 9) {
    // call JQuery plugins to apply box shadows, round corners, etc.    
}

我意识到这有些脆弱,因为我使用浏览器检测而不是特征检测,但我找不到一种方法来检测诸如使用jQuery.support来转角的功能。

其次,我只知道可以模拟一些CSS3属性(盒子阴影和圆角)的jQuery插件,还有其他用于背景渐变,不透明度和文本阴影的插件吗?

最后,如果有一种完全不同的方式来实现我的目标,那么请随意提出替代方案。

1 个答案:

答案 0 :(得分:2)

首先,我会考虑采用优雅降级/渐进增强的理念。对功能最强大的浏览器进行编码,并确保功能较少的浏览器具有可接受的而不是相同的体验。

我不愿意提及这一点,但你可以探索filters for IE。这些将模拟其中一些属性 - 如框阴影和不透明度。但是要预先警告:过滤器的性能会受到影响,并且不会像原生CSS那样渲染得很好。

文字阴影 - 这是一个棘手的问题 - 基本上你必须依赖javascript。如果你没有文字阴影就可以生活,我只会让它成为。

背景渐变 - 您仍然可以使用平铺的背景图像。有IE过滤器,但是它的成本与上面相同,并且在使用它们时会发生布局奇怪。

圆角 - 我还没有找到一个很好的解决方案。就这样吧。

不透明度 - IE的不透明度过滤器运行良好(具有相同的警告)。如果您正在寻找RGBA支持,则必须使用透明PNG作为背景。

我建议,不是根本不针对IE8,而是使用类似modernizr的内容来根据浏览器的功能或不支持来定位浏览器。

另外:this