前段开发过程遇到的问题以及解决方案

问题1:使用mouseover,mouseout 切换div的显示和隐藏时,div出现晃动

解决方案1:将mouseover,mouseout方法改成mouseenter,mouseleave方法,没有什么实际作用

解决方法2:设置一个100-200的延时,div切换不晃动了,因为有延时

原因分析:mouseover() 方法触发 mouseover 事件,或规定当发生 mouseover 事件时运行的函数,与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

问题2:使用img时,默认下方会出现一条白色的间隙

解决方案1:如果图片是一个单独的部分,那么将图片的display设置为block

原因分析:图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 有关),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。block元素中包含img均会有这个现象。 

问题3:将li的display设置成inline-block时,上下左右均为出现一个空白间隙

解决方案1:设置父元素的font-size=0;

原因分析:

问题4:图片轮播过程中使用clone()克隆元素并拼接后,无法获取元素的顺序

解决方案1:jquery1.9版本前使用live()方法

解决办法2:jquery1.9版本后使用on()方法

原因分析:元素添加时间时无法为未来生成的元素绑定上事件方法。

问题5:使用on()方法绑定hover()事件

解决方案1:$(父选择器).on(“mouseover mouseout”,“要绑定到的地方的选择器”,function(event){

if(event.type=="mouseover"){

.......

}

else{

.......

}

});

问题6:ie8在调试模式下运行正常,在浏览器模式下运行不正常

解决方案1:去掉代码中用于调试的console.log()语句

原因分析:console.log IE8直到打开 DevTools,并不创建控制台对象因此 console.log调用可能导致错误,

http://stackoverflow.com/questions/690251/what-happened-to-console-log-in-ie8

你可能感兴趣的:(前段开发过程遇到的问题以及解决方案)