码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-08-30 17:49:19      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

 

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

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

标签:

原文地址:http://www.cnblogs.com/meway/p/5822751.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!