面对现实，有些人将Internet Explorer用作其网络浏览器。 可能是因为工作已锁定了他们的机器，而他们却无法安装像样的浏览器。 在出现诸如HTML5和CSS3之类的强大新技术的时代，IE无法正确处理它们也就不足为奇了。 幸运的是，围绕浮动的一些技巧可以使您的生活更轻松。 看看这个帖子。

1.兼容IE的字体嵌入

早在很久以前，网络就以几种字体（Arial，Verdana，Courier和最著名的Times New Roman）占据主导地位。 显然，几乎所有计算机都安装了这些字体，因为它们被标记为“网络安全”。 （尽管不是免费的，但未安装在GNU / Linux上）。

但是不久前，字体嵌入已经成为一种非常有趣和受欢迎的技术，因为它允许您在设计中嵌入特定字体，以及其他技术，@ font-face方法可能是最干净的，无论您是否相信，IE自版本4开始，就一直支持字体嵌入。 

@font-face {  
	  font-family: yourFontName ;  
	  src: url( /location/of/font/FontFileName.ttf ) format("truetype");  
	}  
	 
	/* Then use it like you would any other font */  
	.yourFontName { font-family: yourFontName , verdana, helvetica, sans-serif;  
	}  
}

资源

2. RGBa支持

RGBa中的“ a”代表alpha。 这项新功能使开发人员可以为颜色指定不透明度值，这在编码网站时非常有用。 

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

像往常一样，Internet Explorer显示出其缺乏创新，并且与完全不支持RGBa的其他浏览器相比，其劣势。 幸运的是，滤镜可以实现与RGBa十分相似的效果：

资源

3.旋转HTML元素

CSS3可以使用transform属性来旋转元素。 

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

Internet Explorer将仅忽略上述所有3个声明。 但是，嘿，IE用户得到了过滤器，不是吗？ 当然，该属性不是W3C有效的，但是由于它是Internet Explorer，因此您不应提出太多要求。 以下代码将在所有版本的IE上模仿转换：

资源

4.不透明度

不透明度是IE无法渲染的另一个CSS3。 太可惜了，因为就网页设计而言，允许在特定元素的不透明度上进行交互非常有趣。

同样，糟糕的过滤器属性可以帮助我们在IE上获得令人满意的结果。 以下示例显示了如何使用过滤器使元素透明。 

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

资源

5. CSS3伪选择器仿真

CSS3引入了许多非常有用的选择器。 其中，：nth-child（）伪类的目标是在文档树中在其自身之前具有一定数量的同级元素的元素，如下所示： 

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

您可以猜到，对于IE而言，这类事情太高级了。 为了克服这个问题，Keith Clark创建了一个非常有用的脚本，名为ie-css3.js。 （使用起来很容易：下载Robert Nyman的DOMAssistant，Keith的ie-css3.js并将它们链接到HTML文档标题中。）

资源

6.多列布局

CSS3允许您自动在列中显示一些内容。 这是一件了不起的事情，因为它为设计师提供了更多创建令人敬畏的布局的可能性。

以下CSS将在Firefox和Safari上运行。 它将自动将列添加到div元素。 

.column {
	-moz-column-width: 13em,
	-webkit-column-width: 13em,
	-moz-column-gap: 1em,
	-webkit-column-gap: 1em
}

不幸的是，无法在Internet Explorer上执行类似的操作。 但是jQuery及其columnize插件可以为您提供帮助！ 以下示例说明了使用jQuery和columnize创建列的简便性： 

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

资源

7.圆角！

他们以“ Web 2.0？ 外观和感觉。 CSS3规范对此有所了解，并创建了一个名为border-radius的属性，该属性旨在轻松创建圆角而无需使用单个图像。 对于那些不知道的人，以下是使用边界半径的方法： 

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

幸运的是，有多种方法可以在不使用图像的情况下创建符合IE的圆角。 我最喜欢的是DD roundies，它是一小段JavaScript，可以环绕任何类型的HTML元素。 以下示例将使用roundify类在任何HTML元素上创建圆角。

资源

8. IE上的CSS box-shadow

这是CSS3最酷的新属性之一，因为它使您可以轻松地在任何类型的html元素上创建漂亮的阴影，而无需使用任何图像。 但是，不要问Internet Explorer是否可以处理盒子阴影。 不可以 再次，要模仿box-shadow CSS属性，我们必须使用filter专有属性，如以下示例所示： 

.shadowed {
-moz-box-shadow: 2px 2px 3px #969696;
-webkit-box-shadow: 2px 2px 3px #969696;
}

.shadowed {
	background-color: #fff;
	zoom: 1;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}

资源

9.在IE上使用text-shadow CSS属性

今天，大多数现代浏览器可以很好地呈现此属性，但是IE再次忽略了它。 令人高兴的是，专有的，仅IE的过滤器属性可以很好地模仿文本阴影。 

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

资源

10.在IE上启用HTML5

大多数现代浏览器已经可以（至少部分地）处理新的HTML5建议。 但是，由于Internet Explorer的创新意识并不广为人知，因此它只会忽略标记。

html5.js是一个非常有趣的项目，旨在使Internet Explorer HTML5兼容。 您唯一要做的就是将html5.js脚本嵌入html文档标题中。 您可以热链接脚本，如下例所示：