遇到的兼容性bug

1.（IE6）：ie6环境下，通过设置z-index：999；无效果；

原因：IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。

解决办法：找到DOMtree里面所有设置了relative属性的父标签，依次递增设置z-index；

 

 

2.（IE6）：ie6环境下，input输入款光标上下不居中；

解决办法：给input一个小一点的height，然后用padding上下补白控制input的高度大小；

 

3.（IE8）：input text  里面用text-indent失效；

解决办法，将text-indent：30px；换成padding-left：30px；

 

4.（IE8/IE9）：placeholder是css3属性，不支持；

解决办法：使用js设置value值；

<input type="text" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value="Search" >

　　

 5.placeholder更改颜色：

需要考虑各种浏览器兼容性；

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

　　

 6.（IE8）：半透明部分设置样式：opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常，是图上的效果。但是这样在ie6-ie8中是不支持的，需要加上下面这句话：

解决办法：

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);