14
2020
12

经常遇到的浏览器的兼容性问题有哪些,原因,解决方法是什么

png24位的图片在Ie6浏览器上出现背景。解决方案是做成png8

浏览器默认的margin和padding不同。解决方案是假一个全局的*{margin:0;padding:0}来统一

IE6双边距bug;矿属性变迁float后,又有横向的margin情况下,在Ie6显示margin比设置的大。解决方案是在float的标签控制中加入display:inline;将其妆花为行内渐进识别的方式,从总体中逐步排除局部。

设置较小高度标签(一般小于10px),在IE6,IE7中高度超出自己设置高度。解决方法:给超出高度的标签设置overflow:hidden;或者设置行高line-hieght小于你设置的高度

chrome中文界面默认或将小于12px的文本强制按照12px的文本强制按照12px显示,可通过加入css属性 -webkit-text-size-adjust:none 解决

移动端


1px边框问题。解决方案采用微元素模拟的方式

 .scale{

  position: relative;

  border:none;

 }

.scale:after{

  content: '';

  position: absolute;

  bottom: 0;

  background: #000;

  width: 100%;

  height: 1px;

  -webkit-transform: scaleY(0.5);

  transform: scaleY(0.5);

  -webkit-transform-origin: 0 0;

  transform-origin: 0 0;

}

点透问题,在安卓某些版本触发两次点击问题。解决方案:引入fastclick处理点透问题

安卓部分版本input里的placeholder位置偏上。解决方案:把input的line-height设为normal

ios的body位置overflow:hidden后仍然可以滚动。解决方案:一般在所有元素最外层再包一大盒子.wrapper

 .wrapper{

   position:relative;

   overflow:hidden;

 }

ios滚动卡顿。解决方案:在滚动的容器上加上webkit-over-flow-scrolling:touch;

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。