2

我有一个使用各种 CSS3 样式的网站，这些样式仅在 Firefox 10 中真正经过测试。我需要一些方法来模拟在 IE8 中查看时本机不支持的各种 CSS 样式：

  • 盒子阴影
  • 文字阴影
  • 背景渐变
  • 圆角
  • 不透明度

我试过使用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 插件，还有其他用于背景渐变、不透明度和文本阴影的插件吗？

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

4

1 回答 1

2

首先，我会考虑接受优雅降级/渐进增强的想法。为功能最强大的浏览器编写代码，并确保功能较弱的浏览器具有可接受的不同体验。

我不愿提及这一点，但您可以探索IE 的过滤器。这些将模拟其中的一些属性——比如盒子阴影和不透明度。不过要预先警告：过滤器会影响性能，并且不会像原生 CSS 那样渲染得那么好。

文本阴影 - 这是一个棘手的问题 - 基本上，您必须依赖 javascript。如果你能在没有文字阴影的情况下生活，我就顺其自然吧。

背景渐变 - 您仍然可以使用平铺的背景图像。对此有 IE 过滤器，但其成本与上述相同，并且在使用它们时会发生布局异常。

圆角 - 我还没有找到一个很好的解决方案。随它去。

不透明度 - 有一个适用于 IE 的不透明度过滤器效果很好（有相同的注意事项）。如果您正在寻找 RGBA 支持，则必须使用透明 PNG 作为背景。

不过，我建议不要完全针对 IE8，而是使用诸如modernizr之类的东西来根据浏览器支持或不支持的功能来定位浏览器。

还有：这个。

于 2012-02-15T15:21:25.840 回答