记录IE6/7/8兼容性问题

1、RGBA问题

解决办法：

css中设置 IE8及IE更早版本 { filter:Alpha(opacity=50) ； //opacity值为0 到 100
} 兼容CSS3的浏览器设置： { opacity：0.5 ； //值是0 到 1.0 }

或者：
我们先来解释以下rgba。
rgba的含义，r代表red，g代表green，b代表blue，a代表透明度
rgba(0,0,0,.5) 这样就代表了黑色，透明度为0.5
要想解决在IE8下的透明度问题，可以增加这样一句话：

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);    /*IE8支持*/

这句话本来是做渐变用的，但是这里没有渐变效果所以startColorstr和endColorstr设置为同一种颜色。

       这里的#7f000000，#7f代表的是透明度，000000代表的是颜色,下面是透明度的对应表：

2、z-index无效问题

引用原文：点击这里跳转至原文

绝对定位元素的“有定位属性（relative或absolute）的父元素”在渲染层次时起到了主要作用，前面的被后面的覆盖了。解决办法就是给有定位属性的父元素设置z-index

解决办法：

父级元素加上position:relative;并设置z-index属性。父级元素的z-index优先，其中包含的元素的z-index是相对于父级元素的index。

<div style="position:relative;z-index:2;">    <p style="position:absolute;z-index:99;"> ...(要在上层显示的内容）</p><div><div style="position:relative;z-index:1;">    ...<div> 

上面的例子中，倘若将第一个div的z-index设置为-1，则无论p的z-index为多少，多会被下面的div遮住。 相反，倘若下层div的z-index也设置成2，ie7正在解释时，会按照”position:relative”的层的顺序，自动叠加，即实际值是3。没有加position属性时，所有值继承自父级。

3、absolute定位之后，元素宽度无法100%问题

引用原文：点击这里跳转至原文

当元素设置了 absolute 后，默认就不是100%的宽度了，而是内容多宽就是多宽
如果希望absolute 以后的元素依然和父容器一样是的100% 宽度。

有两个方法：
1.直接设置 width:100%
2.设置left:0px right:0px; 推荐！！！

<div style="width:1190px; height: 300px; background-color: gray;position: relative;">    <div style="position: absolute;top: 50px;left: 0px;right: 0px; background-color: yellow;">hehehehe</div>    <div style="position: absolute;top: 150px;left: 0px;width:100%; background-color: yellow;">hehehehe</div>    <div style="position: absolute;top: 200px;left: 0px;background-color: yellow;">hehehehe</div></div>

注：

当元素的position设置为absolute或者fixed，如果元素的父容器为body的时候设置width为100%会出现横向滚动条，因为这里的100%是相对屏幕而不是浏览器。所以不能设置100%，如果想要全屏显示则设置left:0px;right:0px;即可。