jquery - 在IE8中模拟css3样式

Question

我有一个使用各种 CSS3 样式的网站，该样式仅在 Firefox 10 中进行了真正的测试。我需要某种方法来模拟在 IE8 中查看时 native 不支持的各种 CSS 样式:

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

我尝试过使用 css3pie ，但是当我包含 .htc 文件时，它产生了一些令人不快的副作用。我知道有 jQuery 插件可以为 IE8 中的元素添加框阴影和圆 Angular ，因此我正在考虑在条件代码块中使用这些插件，例如

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

我意识到这有点脆弱，因为我使用的是浏览器检测而不是功能检测，但我找不到一种方法来检测功能，例如使用 jQuery.support 圆 Angular 的能力.

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

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

Answer 1

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

我讨厌提及这一点，但你可以探索filters for IE 。这些将模拟其中一些属性 - 例如盒子阴影和不透明度。不过，请预先警告:过滤器会影响性能，并且不会像原生 CSS 那样呈现得很好。

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

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

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

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

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

另外:this .