web开发过程中遇到的一些兼容问题

Posted 2020-08-31

先来总结下在前端开发过程中容易遇到的一些兼容问题。

 

1、 块属性标签float之后，如果有横向的margin属性，在IE6显示margin比设置的值大。

　　解决方案：给float的元素添加display:inline属性，使其转化为行内元素。

 

2、 设置较小高度的标签（一般小于10px），在IE6、IE7、遨游中高度超出自己设置的高度。

　　解决方案：给元素添加overflow:hidden属性；或者设置line-height小于你设置的高度。

 

3、 多个图片在一些浏览器中出现默认间距。

　　解决方案：给图片元素添加float属性。

 

4、 标签设置min-height属性不兼容。

　　解决方案：如需设置标签的最小高度为300px。需要如下设置：{min-height:300px;height:auto !important;height:300px;overflow:visible;}

　　备注：当内容高度小于一个值（如300px），容器高度为300px，当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条时，需要考虑这个兼容问题。

 

5、 opacity定义元素的透明度问题。

　　解决方案：filter:alpha(opacity=80); /*IE支持该属性*/

　　　　　　   opacity:.8; /*支持css3的浏览器*/

 

6、 文字阴影的兼容问题。

　　解决方案：IE：{filter:shadow(Color=#666,Direction=135,Strength=5)}

　　　　　　　其他浏览器：{text-shadow:1px 1px 1px #666;}

 

7、 盒子阴影的兼容问题。

　　解决方案：{box-shadow:5px 5px 5px #666; -mox-box-shadow:5px 5px 5px #666; -webkit-box-shadow:5px 5px 5px #666;}

 

8、 定义1px高度的容器。

　　解决方案：overflow:hidden || zoom:0.08 || line-height:1px

　　备注：zoom属性设置或检索对象的缩放比例。

 

9、 文字与图片垂直居中。

　　解决方案：为文字与图片的共同父元素所有的后代元素定义*{vertical:middle;}

　　例：<p>我要垂直居中<img src="images/1.jpg"></p>

　　　　p*{vertical:middle;}

 

10、 JS浏览器兼容问题。

　　(1)ie不支持ClassName取标签，非ie支持

　　(2) 获取非ie窗口的scrolltop值通过document.body.scrollTop

　　     获取ie窗口的scrolltop值通过document.documentElement.scrollTop

　　(3) 通过childNodes获取子节点，ie不能取到回车节点，非ie可以。

　　(4) innerText在火狐中不可用

　　(5) addEventListener 非ie支持，attachEvent ie专用

　　(6) input标签的type属性在ie6中不可修改