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%; }