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