几个 IE 样式解决方案

2012-06-12

这篇文章将会记录一些 IE 兼容性的解决方案。忙碌的时候，做个笔记。稍空的时候，记录下来。随着学习经验的积累，这就是财富。

###一，IE 背景穿透解决方案（空路径)

有时候，为了给页面的某一个元素设置一个空的背景，那么不去设置background属性，恰巧这个元素有交互效果，要么是mouseover，要么是mouseout。而在 IE 下，会导致该元素没有出发交互动作。或者说是穿透到了下一个元素中去。

这样的案例，经常发生在一些有小三角型的tips里面。于是，我通常的解决方法如下：

.sl-through {
	*background: url(about:blank);      	/* for IE 6-7 */
	background: url(about:blank)\0;			/* for IE 8 */
}
:root .sl-through background:rgba(0,0,0,0); /* for IE 9 */

###二，Iframe 背景半透明解决方法

先说一下透明的通用解决方法，例如使用Opacity来为一个div层做半透明，其实不是很建议，因为这个元素的子元素会继承半透明的属性。解决了半透明问题，结果又得处理文字上的不透明问题。

通常的解决方法是通过ruba(高级浏览器)和渐变滤镜(IE浏览器)做一个层的透明解决方案：

/*
 * filter 中的 StartColorStr 和 EndColorStr:
 *    #4c000000 是 30% 透明度的 #000000 的意思
 *    组成: # + 透明度 + 颜色
 *    算法: Math.floor(0.6 * 255).toString(16);
 */
.sl-rgba{
    background:rgba(0, 0, 0, 0.3);	/* 支持高级浏览器 */
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000'); /* for IE */
}
:root .rgba{
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000'); /* for IE9 */ 
}

以上解决的只是一个页面里面的半透明解决方案，解下来说为一个页面里的Iframe做半透明。

Iframe里面的样式控制：

html, body { background: none; }

父页面的Iframe需要添加一个属性：allowTransparency='true'，这样就可以解决iframe的半透明问题。

###三，IE8 下使用滤镜效果与 a 标签兼容问题

如上文的半透明解决方案，使用了IE的滤镜来解决半透明问题。但IE滤镜的使用，在IE8下，有时候会导致子元素里面的 a 标签链接没有a:hover效果。

举个例子，为一个div层做个阴影，使用了滤镜。那么，需要对a标签增加一个属性position: relative。

###四，投影问题

在 Aliceui 中，我们罗列出了一些解决方案，例如跨浏览器背景阴影，就很好地解决了阴影问题。现更新如下：

.sl-shadow {
	/* modern web browsers */
	-moz-box-shadow:1px 3px 12px #bbb;
	-webkit-box-shadow:1px 3px 12px #bbb;
	box-shadow:1px 3px 12px #bbb;

	/* 一定要设置background, 不然 ie 会显示在字体上 */
	background: #fff;

	/* gte=ie8 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Glow(color=#aaaaaa,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";

	/* lte=ie7 */
	*filter:
    progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
    progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
}
:root .sl-shadow { filter:none\9; }  /* IE9 不使用滤镜 */
.sl-shadow a { position: relative; } /* 解决上文所说的 a:hover 问题 */

###五，IE 下未安装 flash 引起页面的白屏等待状态

这里简单带过，在没有安装flash的机器上运行有object的代码时，IE里面会导致页面停留在加载flash安装文件的进程上，直到浏览器下载完毕再渲染接下来的DOM结构。

经过排查，这样的情况会导致页面刷新白屏加载一段时间：

1, 机器未安装flash，页面有flash相关代码

2, object 代码与下一个DOM结构之间存在script标签。

初步原因分析：没有安装flash的机器，渲染页面的时候，会请求flash网站，发送回来安装文件。这时候在IE下如果有script标签，浏览器可能会误认为这段脚本即将使用flash，或者进行通讯。于是必须执行。这导致的结果就是必须得等安装文件加载好，才去渲染页面。就有白屏了。

解决方法：将script标签包在div里面，或者移到最底端。

##六、IE6 最小高度控制

我们在定义一个页面的时候，或许会给这个页面一个最小的高度，通常很简单min-height: 500px;，这样就可以解决很多浏览器。但是 IE6 不认这个。好吧，简单把代码贴下，定一个高度为 520px 的容器：

.sl-minheight {
    height: auto !important;
    _height: 520px;
    min-height: 520px;
	_overflow: visible;
}

##七、其他

a 链接的空路径，有时候在思考是使用 javascript:void(0);，还是javascript:;, 其实在有Iframe的页面，这两种写法在IE6下，触发事件都会阻塞页面的渲染进程的。所以使用#会更好。

日后更多积累，再补充。(2012.06.12)

diy1818

Good children, Constantly learning, Constantly growing.

几个 IE 样式解决方案