遇到的兼容性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值;


 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);