简体   繁体   English

如何为Internet Explorer 7和8填充CSS 3样式?

[英]How can I polyfill CSS 3 styles for Internet Explorer 7 and 8?

I work for a client who has masses of <a> elements on their site which use the same styling and reference the same class name. 我为一个在其站点上具有大量<a>元素的客户工作,这些元素使用相同的样式并引用相同的类名。

The problem I have is the developer who worked on this project before me used CSS3 to style the element and completely ignored the fact IE7 and IE8, even though it was in the scope of the browser model and this issue is now apparent on hundreds of pages. 我遇到的问题是,在我使用CSS3设置元素样式并完全忽略IE7和IE8的事实之前,即使在浏览器模型的范围内,该问题现在在数百页上都可以看到,而在使用CSS3设置元素样式之前,这个项目的开发人员。

What I want to ask is what do you feel the best approach is to putting a suitable fix in place without effecting the markup? 我想问的是,您认为最好的方法是在不影响标记的情况下进行适当的修复? such as scripts which support border-radius, box-shadow, gradients etc. 例如支持边界半径,框阴影,渐变等的脚本。

Please don't come back answering about graceful degradation as this is not going to happen, I have already spoken to the client and they don't want to take that approach. 请不要再回答有关正常降级的问题,因为这不会发生,我已经与客户交谈过了,他们不想采用这种方法。

You can use a script to perform that "support" for you on clients using old IE versions! 您可以使用脚本在使用旧IE版本的客户端上为您执行该“支持”!

Download script here. 在此处下载脚本。

This script allows CSS3 support for Internet Explorer 6, 7, and 8. 此脚本允许Internet Explorer 6、7和8的CSS3支持。

The web site link ! 网站链接

My favourite solution to this problem is CSS3 PIE . 我最喜欢的解决方案是CSS3 PIE It's an HTC which brings a nice selection of CSS3 features to IE 6-9 . 这是一个HTC,可为IE 6-9带来许多CSS3功能

Note: PIE uses absolutely positioned VML elements (in IE6-8) to support a variety of CSS3 features. 注意: PIE使用绝对定位的VML元素(在IE6-8中)来支持各种CSS3功能。 This can cause issues like disappearing backgrounds/borders/etc. 这可能会导致背景/边框/消失等问题。 The fix is usually to use position: relative; 解决方法通常是使用position: relative; on the affected element or it's parent. 在受影响的元素或其父元素上。 See the known-issues for more information (and other fixes). 有关更多信息(和其他修补程序), 请参阅已知问题

I think there is no one solution but you can combine more than one solution, for example to border-radius you can use jquery corner: 我认为没有一种解决方案,但是您可以组合多个解决方案,例如,对于边界半径,可以使用jquery corner:

http://jquery.malsup.com/corner/ http://jquery.malsup.com/corner/

modernizr can be a good tool too! modernizr也可以是一个很好的工具!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM