浏览器兼容是前端开发人员必须掌握的一个技能，之前听过一句话：我们应该追求最新的浏览器使用最新的技术，但是一定要有渐进增强，向后兼容的思想。本篇文章就笔者自己平时遇到的一些兼容问题做个记录和整理。
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%;
}
时间： 2024-10-15 18:51:56