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

Posted 2020-08-05

　　前端培训课程马上结束，面临着出去找工作，在这里总结一下学习到的知识，也记录下自己找工作的情况和一些面试经验。希望能够坚持下去，使自己能有所提高...

 

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

 

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、 待续...