Web 前端开发中一些兼容性问题及其解决办法 (持续更)

浏览器兼容是前端开发人员必须掌握的一个技能，之前听过一句话：我们应该追求最新的浏览器使用最新的技术，但是一定要有渐进增强，向后兼容的思想。本篇文章就笔者自己平时遇到的一些兼容问题做个记录和整理。

1、IE8下元素有宽高但是元素没有内容时，对元素添加事件如click等无效（埋链接和在图片上埋按钮时会经常遇到这个问题）

　在IE8中如果元素没有内容，即便元素有宽和高，浏览器还是不能识别，这时一个很好的办法就是对该元素设置背景色，然后再让元素的透明度为0，这样元素背景色并不会显示，且元素内有内容，能够被IE8识别到。

CSS:

.box{
　　　　width:100px;
　　　　height:100px;
　　　　background-color:orange;
　　　　opacity:0;
　　　　filter:alpha(opacity=0);
　　}

HTML:

<div class="box"></div>

2、Safari浏览器调用手机软键盘时会出现诸如闪屏、页面自动滚动等问题，原因是position:fixed属性失效了

出现闪屏的原因是：fixed 元素失效，键盘定位无效，导致页面和键盘一起滚动

解决思路：如果页面不会因过长而出现滚动，那么即使 fixed 元素失效，键盘也不会跟随页面滚动，也就不会出现上面的问题了。

解决方法：（1）让fixed元素父级的高度不超过浏览器窗口高度

　　　　　（2）将原页面的整个内容放到一个宽为浏览器窗口宽度，高为浏览器窗口高度的容器container内，并设置container 的overflow-y属性为scroll，此时加上css3属性保证页面滚动时的流畅性：-webkit-overflow-scrolling : touch;　

　　　　（3）让fixed的父级与container在同一级，这样整个页面的高度就不会超出浏览器窗口的高度，此时可以将fixed属性换成absolute属性，效果是一样的。

HTML:

<html>
　　<body>
　　　　<div class="container">
　　　　　　<!-- content -->
　　　　</div>
　　　　<div class="fix-box">
　　　　　　<input class="input" type="text" >
　　　　</div>
　　</body>
</html>

CSS:

.container{
　　width:100%;
　　height:100%;
　　overflow-y:scroll;
　　-webkit-overflow-scrolling : touch;
}
.fix-box{
　　position:absolute;
　　left:0;
　　top:0;
　　width:100%;
　　height:100%;
}