在IE8中模拟css3样式
我有一个使用各种 CSS3 样式的网站，仅在 Firefox 10 中进行过测试。我需要某种方法来模拟各种 CSS 样式，这些样式在 IE8 中查看时本机不支持：
- 框阴影
- 文本阴影
- 背景渐变圆角
- 不
- 透明度
我已经尝试使用 css3pie，但是当我包含 .htc 文件时，它产生了一些令人不快的副作用。我知道有 jQuery 插件可以向 IE8 中的元素添加框阴影和圆角，所以我正在考虑在条件代码块中使用这些插件，例如
if ($.browser == 'msie' && $.browser.version.split('.')[0] < 9) {
// call JQuery plugins to apply box shadows, round corners, etc.
}
我意识到这有点脆弱，因为我使用的是浏览器检测而不是功能检测，但我找不到一种方法来检测功能，例如使用 jQuery.support 圆角的能力。
其次，我只知道 jQuery 插件可以模拟一些 CSS3 属性（框阴影和圆角），还有其他用于背景渐变、不透明度和文本阴影的插件吗？
最后，如果有完全不同的方法来实现我的目标，那么请随时提出替代方案。
I have a website that uses various CSS3 styles which has only really been tested in Firefox 10. I need some way to simulate various CSS styles which are not natively supported when viewed in IE8:
- box shadow
- text shadow
- background gradient
- round corner
- opacity
I've tried using css3pie, but when I included the .htc file it produced some unpleasant side-effects. I know there are jQuery plugins that can add box shadows and round corners to elements in IE8, so I'm considering using these inside a conditional code-block, e.g.
if ($.browser == 'msie' && $.browser.version.split('.')[0] < 9) {
// call JQuery plugins to apply box shadows, round corners, etc.
}
I realise that this is somewhat brittle because I'm using browser detection rather than feature detection, but I can't find a way to detect features like the ability to round corners using jQuery.support.
Secondly, I'm only aware of jQuery plugins that can simulate some of the CSS3 properties (box shadow and round corners), are there others for background gradient, opacity and text shadows?
Finally, if there's a completely different way to achieve my goal, then please feel free to suggest an alternative.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
首先，我会考虑接受优雅降级/渐进增强的想法。为功能最强大的浏览器编写代码，并确保功能较弱的浏览器具有可接受而非完全相同的体验。
我不想提及这一点，但您可以探索 IE 过滤器。这些将模拟其中一些属性 - 例如盒子阴影和不透明度。但要预先警告：过滤器会影响性能，并且不会像原生 CSS 那样呈现得很好。
文本阴影 - 这是一个棘手的问题 - 基本上你必须依赖 javascript。如果你可以在没有文字阴影的情况下生活，我就顺其自然。
背景渐变 - 您仍然可以使用平铺的背景图像。有 IE 过滤器可以实现此目的，但其成本与上述相同，并且在使用它们时会发生布局奇怪的情况。
圆角 - 我还没有找到一个很好的解决方案。随它去。
不透明度 - IE 有一个不透明度过滤器，效果非常好（有相同的注意事项）。如果您正在寻找 RGBA 支持，则必须使用透明 PNG 作为背景。
不过，我建议，不要完全针对 IE8，而是使用 modernizr 之类的东西来根据浏览器的功能或功能来定位浏览器不支持。
另外：这个。
First, I would consider embracing the idea of graceful degradation/progressive enhancement. Code to the most capable browsers, and make sure less capable browsers have an acceptable not identical experience.
I loathe to mention this, but you can explore filters for IE. Those will simulate some of these properties - like box shadow and opacity. Be forewarned, though: filters have performance hit, and will not render as nicely as native CSS.
Text shadow - that's a tricky one - you'll have to rely on javascript, basically. If you can live without the text shadow, I'd just let it be.
Background gradients - you can still use background images that tile. There are IE filters for this, but that comes with the same cost as above, and there are layout oddities that happen when you use them.
Rounded corners - I have yet to find a great solution for that. Let it be.
Opacity - there is an opacity filter for IE that works pretty well (with the same caveats). If you're looking for RGBA support, you'll have to use a transparent PNG for the background.
I would suggest, though, rather than targeting IE8 at all, use something like modernizr to target browsers based on what features they do or do not support.
Also: this.