css消除全部css_消除旧版浏览器中CSS3头痛

css消除全部css

你已经看到了它的时间 和 时间 再次上Webdesigntuts +; 您可能会想尝试该CSS3教程，但是由于旧版浏览器缺乏支持，因此您无法进一步研究。 但是，有很多工具可以在这种情况下提供帮助。 今天，我们将弄清楚如何在较旧的浏览器（ 包括 Internet Explorer）中征服CSS3。

让我们看一下在旧版本浏览器中呈现最重要CSS3属性的各种技术。

---

设置

首先，下载并包含本教程的所有必需脚本。 出于本练习的目的，请将所有脚本与CSS文件放在同一文件夹中。 这是我们需要的工具：

• CSS3 PIE
• 选择性
• Mootools （将用于Selectivizr）
• jQuery的

CSS3 PIE

CSS3PIE是我们的IE助手。 PIE代表Progressive Internet Explorer ，它扩展了Internet Explorer的行为以帮助其识别和显示CSS3属性。

查看CSS3PIE 下载文件夹，您将在其中找到各种文件。 我们将使用PIE.htc ，并且将从CSS中调用它，因此建议您将其放在样式表所在的文件夹中。

选择性

Selectivizr用于处理CSS3选择器。 它与JavaScript库（例如jQuery或Mootools）结合使用。 我建议选择Mootools，因为它支持所有Selectivizr功能（CSS选择器）。

在本教程中，我将使用Google托管的Mootools库，因此，我们只需将其包含在头中即可：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="selectivizr-min.js"></script>

jQuery的

我们可以使用jQuery呈现CSS3的text-shadow属性的替代方案。 我们只需要下载jQuery text-shadow插件 ，然后将其包含在jQuery中即可：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.textshadow.js"></script>

---

好的，这已经涵盖了我们的工具包，现在让我们看看我们如何使用这些工具来解决CSS3的难题。

---

边界半径

Border-radius可能是最熟悉CSS3属性。 幸运的是，在Internet Explorer中进行渲染只是使用CSS3PIE的一种情况。

.box {
	border-radius: 10px;
	behavior: url(PIE.htc);
}

如您所见，定义边界半径规则后，我们仅需“调用” PIE脚本。

---

盒子阴影和RGBA颜色

以类似于border-radius的方式，为了使Internet Explorer能够识别盒子阴影，我们只需要包含PIE脚本即可。 注意，我们也可以使用RGBA值声明阴影颜色。

.box {
	box-shadow: 5px 5px 5px rgba(0, 0, 0, .75);
	behavior: url(PIE.htc);
}

声明背景色时，也可以使用RGBA颜色。

---

背景渐变

为了允许CSS3 PIE渲染背景渐变，我们以以下方式添加background: :：

-pie-background: linear-gradient([<bg-position> || <angle>,]? <color-stop>, <color-stop>[, <color-stop>]*);

实际上，它与其他各种浏览器供应商规则非常相似。 请记住，稍后再调用CSS3 PIE行为！

.box {
	background: -webkit-linear-gradient(top, #0072bc, #00bff3); /* Safari, Chrome */
	background: -moz-linear-gradient(top, #0072bc, #00bff3);  /* Firefox */
	background: -o-linear-gradient(top, #0072bc, #00bff3);  /* Opera */
	background: -ms-linear-gradient(top, #0072bc, #00bff3);  /* IE10 */
		
	-pie-background: linear-gradient(#0072bc, #00bff3);  /* IE6+ */
	behavior: url(PIE.htc);
}

---

多种背景

同样，在这种情况下，我们必须使用-pie-前缀：

.box {
	background: url(img/flash.png) 20px 20px no-repeat, url(img/airplane.png) 90px 50px no-repeat, #00BFF3; /* Modern Browsers */
	
	-pie-background: url(img/flash.png) 20px 20px no-repeat, url(img/airplane.png) 90px 50px no-repeat, #00BFF3; /* IE6+ */
	behavior: url(PIE.htc);
}

---

边框图片

CSS3 PIE的最后一个属性是边框图像：

.box {
	border-image: url(border.png) 27 27 27 27 round round;
	
	behavior: url(PIE.htc);
}

---

CSS3选择器

现在该选择Selectivizr了。 如在本教程开始时演示的那样，包括JavaScript库，那么所有CSS3选择器都将被IE6 +识别！

table tr:first-child {
	background: #252525;
}
				
table tr:nth-child(2n+1) {
	background: #ebebeb;
}

---

文字阴影

使用jQuery库，可以最轻松地跨浏览器呈现此效果。 包含它之后，只需调用textShadow()函数，指向您的选择器即可：

<script type="text/javascript">
	$(document).ready(function(){
	$(".txt").textShadow();
})
</script>

要完成效果，只需将文本阴影添加到CSS。

.txt {		
	text-shadow: 2px 2px 2px black;
}

---

IE特殊过滤器

要替换某些CSS3属性，您还可以使用IE过滤器 。 第一个示例适用于背景渐变：

.box {
	background: #FFFFFF;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
}

第二个等效于transform属性。 但是，语法令人头疼，建议您使用生成器来计算它。

.box {
	/* IE8+ - must be on one line, unfortunately */ 
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766693127, M22=0.9848077530122079, SizingMethod='auto expand')";	   
	/* IE6 and 7 */ 
	filter: progid:DXImageTransform.Microsoft.Matrix(
		M11=0.9848077530122079,
		M12=-0.17364817766693127,
		M21=0.17364817766693127,
		M22=0.9848077530122079,
		SizingMethod='auto expand');
	margin-left: -14px; 
	margin-top: -21px;			
}

---

结论

如您所见，使用各种工具，我们可以确保在旧版浏览器中合理呈现CSS3。 我希望这会鼓励您勇往直前，实践CSS3可以实现的许多效果！ 谢谢阅读。

翻译自: https://webdesign.tutsplus.com/articles/curing-css3-headaches-in-older-browsers--webdesign-4469

css消除全部css