源始web开发过程中遇到的一些兼容问题
前端培训课程马上结束，面临着出去找工作，在这里总结一下学习到的知识，也记录下自己找工作的情况和一些面试经验。希望能够坚持下去，使自己能有所提高...
先来总结下在前端开发过程中容易遇到的一些兼容问题。
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、 待续...
相关内容
javascript移动设备web开发中对touch事件的封装实例
在触屏设备上，一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现。
zepto 是移动端上使用率比较高的一个类库，但是其 touch 模块模拟出来的一些事件存在一些兼容性问题，如 tap 事件在某些安卓设备上存在事件穿透的 bug，其他类型的事件也或多或少的存在一些兼容性问题。
于是乎，干脆自己动手对这些常用的手势事件进行了封装，由于没有太多真实的设备来进行测试，可能存在一些兼容性问题，下面的代码也只是在 iOS 7、Andorid 4 上的一些比较常见的浏览器中测试通过。
tap事件
tap 事件相当于 pc 浏览器中的 click 效果，虽然在触屏设备上 click 事件仍然可用，但是在很多设备上，click 会存在一些延迟，如果想要快速响应的 “click” 事件，需要借助 touch 事件来实现。
var startTx, startTy;
element.addEventListener( ‘touchstart‘, function( e ){
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
}, false );
element.addEventListener( ‘touchend‘, function( e ){
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY;
// 在部分设备上 touch 事件比较灵敏，导致按下和松开手指时的事件坐标会出现一点点变化
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6 ){
console.log( ‘fire tap event‘ );
}
}, false );
doubleTap事件
doubleTap 事件是当手指在相同位置范围内和极短的时间内两次敲击屏幕时触发的事件。在部分浏览器下，doubleTap 事件会选中文本，如果不希望选中文本，可以给元素添加 user-select:none 的 css 属性。
var isTouchEnd = false,
lastTime = 0,
lastTx = null,
lastTy = null,
firstTouchEnd = true,
body = document.body,
dTapTimer, startTx, startTy, startTime;
element.addEventListener( ‘touchstart‘, function( e ){
if( dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
}
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
}, false );
element.addEventListener( ‘touchend‘, function( e ){
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
now = Date.now(),
duration = now - lastTime;
// 首先要确保能触发单次的 tap 事件
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTx - endTx) < 6 ){
// 两次 tap 的间隔确保在 500 毫秒以内
if( duration < 301 ){
// 本次的 tap 位置和上一次的 tap 的位置允许一定范围内的误差
if( lastTx !== null &&
Math.abs(lastTx - endTx) < 45 &&
Math.abs(lastTy - endTy) < 45 ){
firstTouchEnd = true;
lastTx = lastTy = null;
console.log( ‘fire double tap event‘ );
}
}
else{
lastTx = endTx;
lastTy = endTy;
}
}
else{
firstTouchEnd = true;
lastTx = lastTy = null;
}
lastTime = now;
}, false );
// 在 iOS 的 safari 上手指敲击屏幕的速度过快，
// 有一定的几率会导致第二次不会响应 touchstart 和 touchend 事件
// 同时手指长时间的touch不会触发click
if( ~navigator.userAgent.toLowerCase().indexOf(‘iphone os‘) ){
body.addEventListener( ‘touchstart‘, function( e ){
startTime = Date.now();
}, true );
body.addEventListener( ‘touchend‘, function( e ){
var noLongTap = Date.now() - startTime < 501;
if( firstTouchEnd ){
firstTouchEnd = false;
if( noLongTap && e.target === element ){
dTapTimer = setTimeout(function(){
firstTouchEnd = true;
lastTx = lastTy = null;
console.log( ‘fire double tap event‘ );
}, 400 );
}
}
else{
firstTouchEnd = true;
}
}, true );
// iOS 上手指多次敲击屏幕时的速度过快不会触发 click 事件
element.addEventListener( ‘click‘, function( e ){
if( dTapTimer ){
clearTimeout( dTapTimer );
dTapTimer = null;
firstTouchEnd = true;
}
}, false );
}
longTap事件
longTap 事件是当手指长时间按住屏幕保持不动时触发的事件。
var startTx, startTy, lTapTimer;
element.addEventListener( ‘touchstart‘, function( e ){
if( lTapTimer ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
lTapTimer = setTimeout(function(){
console.log( ‘fire long tap event‘ );
}, 1000 );
e.preventDefault();
}, false );
element.addEventListener( ‘touchmove‘, function( e ){
var touches = e.touches[0],
endTx = touches.clientX,
endTy = touches.clientY;
if( lTapTimer && (Math.abs(endTx - startTx) > 5 || Math.abs(endTy - startTy) > 5) ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
}, false );
element.addEventListener( ‘touchend‘, function( e ){
if( lTapTimer ){
clearTimeout( lTapTimer );
lTapTimer = null;
}
}, false );
swipe事件
swipe 事件是当手指在屏幕上滑动后触发的事件，根据手指滑动的方向又分为 swipeLeft (向左)、swipeRight (向右)、swipeUp (向上)、swipeDown (向下)。
var isTouchMove, startTx, startTy;
element.addEventListener( ‘touchstart‘, function( e ){
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
isTouchMove = false;
}, false );
element.addEventListener( ‘touchmove‘, function( e ){
isTouchMove = true;
e.preventDefault();
}, false );
element.addEventListener( ‘touchend‘, function( e ){
if( !isTouchMove ){
return;
}
var touches = e.changedTouches[0],
endTx = touches.clientX,
endTy = touches.clientY,
distanceX = startTx - endTx
distanceY = startTy - endTy,
isSwipe = false;
if( Math.abs(distanceX) >= Math.abs(distanceY) ){
if( distanceX > 20 ){
console.log( ‘fire swipe left event‘ );
isSwipe = true;
}
else if( distanceX < -20 ){
console.log( ‘fire swipe right event‘ );
isSwipe = true;
}
}
else{
if( distanceY > 20 ){
console.log( ‘fire swipe up event‘ );
isSwipe = true;
}
else if( distanceY < -20 ){
console.log( ‘fire swipe down event‘ );
isSwipe = true;
}
}
if( isSwipe ){
console.log( ‘fire swipe event‘ );
}
}, false );
上面模拟的事件都封装在 MonoEvent 中了。完整代码地址：https://github.com/chenmnkken/monoevent，需要的朋友看看吧~