10种方法使你的IE如现代浏览器一般

同诸多的web开发人员一样，我恨透了IE浏览器，尤其是IE6.每次强有力的新技术出现时，毫无意外IE不能很好的支持它，如HTMl5和CSS3.幸运的是一些技巧可以使你的开发生涯更平坦一些。

在IE上启用HTML5

对于HTML5应该有所耳闻吧？如果你对web开发感兴趣的话，那么毫无疑问你听过。对于那些不曾耳闻的朋友，我得简单的说明一下，HTML5是下一代的HTML主要版本。万维网核心的标记语言。绝大多数的主流浏览器早已能够至少支持部分的HTML5新特性。但是由于IE浏览器的创新意识并不为众人知晓，故它很容易忽略掉这些标签。


html5.js是一个有趣的项目，它致力于使IE支持HTML5的特性。你只需在html文档的头部引入html5.js脚本。你可以使用下方的脚本连接来引入它：

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

源码： http://remysharp.com/2009/01/07/html5-enabling-script/

在IE中使用css属性text-shadow

因为text-shadow属性在近期的Firefox3.5中被实现，引起了大量设计师开始使用这个属性。今天大部分的主流浏览器都能很好的识别这个属性，但是我再次声明，IE不鸟它。值得高兴的是，IE专有的filter属性可以很好的模拟text-shadow的效果。以上这个实例展示了如何在主流浏览器应用text-shadow属性以及将filter属性应用于IE浏览器。注意由于filter属性不是标准的css属性，所有它应该使用传统的注释符隔离开来。


如果你想了解更多有关text-shadow的知识，别忘了检出我们的有关text-shadow属性的资源列表。

p.shadowed {
  text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */
  filter: glow(color=#0000ff,strength=3); /* IE */
}

源码： http://www.howtocreate.co.uk/textshadow.html

在IE上使用CSS属性box-shadow

在我看来，box-shadow是一条最酷的CSS3新的属性之一，因为它允许在无需图片为前提为任何类型的html元素创建漂亮的投影。对于设计师和前端开发人员来说都是实用的。

.shadowed{
    box-shadow: 10px 10px 5px #888;
}

请不要问IE是否支持box-shadow，因为答案是否定的。下面这个案例中，我们得再次使用filter这条IE专有的属性来模拟box-shadow效果。

.shadowed {
    filter:
        progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}

源码： http://ole-laursen.blogspot.com/2009/08/using-css3-box-shadow-with-ie.html

圆角

在Web 2.0时代，圆角效果从感觉和视觉上来讲都是很受欢迎的。在CSS3标准中新进了border-radius这一成员，它可以在不使用图片的情况下简单的创建圆角。
下面是border-radius属性的使用范例：

.round{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

幸运的是，已经有了几种方法在不需要图片的前提下在IE浏览器中兼容实现圆角效果。我最喜欢的就是DD roundies这个js插件，它可以为任何html元素创建圆角（能显示的）。以下是为任何使用了.roundify这个类的元素创建圆角。

多栏布局

在CSS3中允许在一栏中让一些内容自动排版。这一伟大的创意将带给设计师更多创造迷人布局的可能。
以下的案例在Firefox和Safari中，将会自动为div元素添加栏。
但是不巧的是，在IE浏览器中并没有实现该效果的方法。但是jQuery的columnize插件却能胜任！下面就是使用columnize方法来实现的效果。

$('#mydiv').columnize();
$('#myotherdiv').columnize({ width: 200 });
$('#mythirddiv').columnize({ columns: 2 });

源码： http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/

CSS3的伪类选择器仿真

CSS3引进了许多极其实用的选择器。这其中，:nth-child()伪类将会选择在DOM树中，同级元素在所给数字之前的元素。如：

p:nth-child(3) {
    color:#069;
}

如你所想，这类操作对IE来说太先进了。为了解决这个问题，Keith Clark写了一个名为ie-css3.js极为实用的脚本。
使用简单”下载Robert Nyman's DomAssistant（http://www.domassistant.com/），Keith's ie-css3.js（http://www.keithclark.co.uk/labs/ie-css3/），并将其引入你的html文件中。

<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>

源码： http://www.keithclark.co.uk/labs/ie-css3/

Opacity

Opacity是又一条IE不能渲染的CSS3属性。这确实一件令人遗憾的事儿，因为在网页设计中能与一个特别元素的透明度进行互动是非常有趣的。
当然，讨厌的filter属性确能再一次的帮助我们在IE浏览器上完成这个效果。下面演示了如何用filter使一个元素透明。

.element{
    opacity:.7; /* Standard CSS */
    filter:alpha(opacity=70); /* IE patch */
}

旋转html元素
用transform属性来使元素旋转在CSS3中是能做到的。

transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);

IE对以上三条代码声明会直接忽视掉。但是没关系，IE不是有filter吗？的确，这条属性并不是W3C的合法属性，但是既然它出自IE，那么也就无需再多问什么了。下面是展示在所有版本的IE浏览器中模拟旋转效果：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540);

源码： http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx

RGBa的支持

在RGBa中a代表alpha（透明）。这个新特性允许开发人员给颜色设置一个透明度属性，在编写一个网站的时候这个特性极为实用。

.color-block {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.2); /* Modern browsers */
}

如同寻常，IE浏览器展示了它对创新的缺乏以及在其他浏览器面前的自卑，因为它根本就不支持RGBa。幸运的是，IE专有的filter属性可以稍稍的模拟一下RGBa的效果。

<!--[if IE]>
<style type="text/css">
.color-block {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050);
    zoom: 1;
}
</style>
<![endif]-->

源码： http://css-tricks.com/rgba-browser-support/

IE顺应字体嵌入

在过去的15年中，所有的网页被如Arial、Verdana、Courier以及随处可见的TimesNewRoman字体所瓜分。这些字体被贴上“网页安全”的标签，这就意味着几乎所有的电脑都装有这些字体。（吐槽一下，在GNU和Linux上没有这些字体，因为他们收费^o^）
纵观所有的技术，@font-face属性可能是最干净的。不管你相信与否，IE竟然从IE4就开始支持这一特性！这是个不错的消息，但微软既然一直走的都是与众不同的路线，所有在IE中你的使用专有的eot格式的字体，你还得用另一套不同声明方式才能在你的网页中嵌入字体，如下：
注意：如果你需要将字体转为微软专有的eot格式的字体，请到此处下载(http://www.kirsle.net/wizards/ttf2eot.cgi)

@font-face {
    font-family: " your FontName ";
        src: url( /location/of/font/FontFileName.eot ); /* IE */
        src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
    }  


/* THEN use like you would any other font */
.element {
    font-family:" your FontName ", verdana, helvetica, sans-serif;
}

源码: http://randsco.com/index.php/2009/07/04/p680
本文译自：http://www.catswhocode.com/blog/10-ways-to-make-internet-explorer-act-like-a-modern-browser 点击打开链接