作为一名web前端开发人员,在开发过程中必定会遇到各式各样的问题。其中,最让web前端开发人员最为头疼的事情莫过于浏览器的兼容性问题。无论的优雅降级还是渐进增强方案,程序员都希望自己的成果几近完美状态,虽然浏览器的兼容性问题有很多无法解决,但如今也相对于其中的一些问题还是有解决方法。在此,我说说我遇到的兼容性问题*以及解决方案*。
问题一:
边距问题:将元素转换成行级元素 display:inline;
问题二:
图片具有默认边距:
1、去除横排边距:添加浮动
2、去除竖排边距:转换为行级display:block;
3、去除竖排边距:添加vertical-align:bottom/top/middle
问题三:
子元素浮动,父元素不浮动,结果无法撑开高度:
1、给父元素设置高度
2、使用br清除浮动
问题四:
透明度:
filter:alpha(opacity=50);
问题五:
定位问题:
设置两个方向的值,例如:top和left,top和right,bottom和left,bottom和right.
问题六:
文字超出设定框时,超出部分显示为省略号:
添加:white-space:nowrap; text-overflow:ellipsis;
问题七:
内容增加时,框的高度为自适应:
min-height:500px; height:auto !important; overflow:visible;
在web前端开发中,兼容性问题大多为IE浏览器,因此,以上解决方法大多为IE浏览器的兼容性解决方式。以上解决方式还存在着一些问题,但还是可以解决一些关于IE的兼容性,且以上兼容性问题皆是我在学习以及做项目过程中常碰到的兼容性问题,我认为对于一些刚接触web浏览器兼容性问题的web前端开发的同行们有一丝帮助,我也希望能够对web前端开发的兴趣爱好者有帮助。