CSS3支持Internet Explorer6、7和8

翻译原文地址

本文原址：http://fetchak.com/ie-css3/

它是什么?

ie CSS3是一个脚本提供InternetExplorer支持一些新的风格可以在即将到来的CSS3标准。

它是如何工作的

如果你浏览这个页面在InternetExplorer中,一些元素已经被重建的脚本在矢量标记语言(VML),即特定的矢量绘图语言。事被遗漏VML支持从IE的CSS实现像圆角和模糊效果。

如何使用它

只是添加CSS样式如往常一样,但包括一个新的线:

 .box {  -moz-border-radius: 15px;   -webkit-border-radius: 15px;   border-radius: 15px;   -moz-box-shadow: 10px 10px 20px #000;   -webkit-box-shadow: 10px 10px 20px #000;   box-shadow: 10px 10px 20px #000;   behavior: url(ie-css3.htc); }

 

问题和解决方法

你期望中的url behavior:url(...)是相对于当前目录为他们在一个 background-image:url(...)样式例如,而是微软决定忽略标准这里,让他们相对于docroot相反。所以 behavior:url(ie-css3.htc)应该工作如果iecss3。htc在网站的根目录。

你可能会遇到问题与z指数,特别是如果嵌入一个ie css3使元素内的另一个。有两个简单的解决方法:

• 设置z指数的iecss3元素到一个数字大于周围的元素。
• 确保iecss3元素定位,例如 position:relative或 position:absolute

有时一个ie css3元素将出现在一个稍微不同的位置比原来的,原始的元素。可能有几个原因:

• 你已经打破了标签标记的某个地方,可能高于iecss3元素。
• 你正在经历misc IE6和IE7 bug。尝试添加样式 zoom:1和/或 position:relative到iecss3元素及其直接父。你也可以尝试删除任何利润在iecss3元素和/或其父母,使用填充相反。

风格和他们的地位

风格什么工作什么是行不通的border - radius

• 设置一个半径为四个角落
• 元素边界

• 设置一个半径分别为个人角落

不必

• 模糊大小
• 抵消

• 其他任何颜色比# 000

区分开

• 模糊大小
• 抵消
• 颜色

• 影子看起来有点不同于它在FF / Safari、Chrome,我不知道为什么