前言

今天总结下目前为止，工作中遇到的一些兼容问题。主要从IE浏览器和移动端两方面入手，可能不是很全面，但都是工作中遇到到，比起一些长篇大论，我感觉反而更实际些。

IE浏览器

现在很少用到低版本了，但是我的工作对兼容性要求很高，现在都2021年，还要兼容IE8，真的很无语，没办法，工作所需，那就只能硬着头皮搞下去，为此抛弃了很多新的特性。

1.background-size问题

起因，图片为背景，上面有点击按钮。正常来讲

  background-image: url('../img/xgxt_login_bg.jpg');
  background-size: 100% 100%;

这样子就可以了，但是IE8下就是不行，即使采用兼容写法，上面的图片路径改成绝对路径，并且背景上面的链接\按钮设置为position:relative，

  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod='scale' , src='http://localhost/bootstrap1/img/xgxt_login_bg.jpg');

效果也不是很好。最后采用这样的方法:不设置背景，用模拟背景的方式：把图片插入到HTML中，然后把它变成块，修改大小，定位，把它的层级调低这样才达到了要求的效果。

2.placeholder问题

h5新的属性无法在ie8下使用，解决办法：引入jquery.placeholder.js，并在下面添加脚本

<script type="text/javascript">
$(function() {
$('input, textarea').placeholder();
});
</script>

3.rgba问题

新的rgba不能使用，如下代码解决

<style type="text/css">
       .box1{
           width: 200px;
           color: white;
           height: 200px;
           background-color:rgba(0,0,0,0.5);
           filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);/*IE8支持*/
           /*这句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的，但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。*/
       }
   </style>

4.input.type问题

需求：需要实现的效果：一个输入框，当输入框未获得焦点的时候，显示为 “请输入密码”；当输入内容并失去焦点的时候，输入内容显示为一串*，如果没有输入仍然显示“请输入密码”。问题说明：IE8及下input.type属性为只读，谷歌等浏览器为读写。解决办法：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

5.a标签中的图片出现边框

给img标签设置border：none即可。

img {border:none;}

6.bootstrap右侧滚动条兼容ie问题

未做兼容前,右侧滚动条覆盖内容兼容后,正常这是因为 bootstrap 设置了一个 CSS 的属性：

@-ms-viewport {
  width: device-width;
}

更改滚动条的样式，可以为 IE 浏览器强制设置一个样式：

html, body {
    -ms-overflow-style: scrollbar;
}

移动端

1.√ 显示为开根号

移动端√ 显示为用 √ 代替。

2.ios中uc浏览器不兼容window.open

使用window.open打开新窗口时经常会被浏览器拦截，自己尝试解决方案如下：a标签的hreft属性要用js禁了（如果写成href=""），否则ios系统的uc浏览器不会跳转，只是重新打开当前页面（2018-5-10）

3.input 固定定位到底部，在ios safari的兼容问题

当时用的是jquery。

var winHeight = $(window).height();
$(window).resize(function(){ //ios软键盘弹出不会触发resize事件
var thisHeight = $(this).height();
$('body').css({'height': winHeight - (winHeight - thisHeight) + 'px', 'overflow': 'auto'})
});

4.绑定点击事件在ios下，要点两次

我碰到这样的情况是因为:给该元素设置了css hover 效果，去掉即可。

5.移动端的橡皮筋效果

简单粗暴的解决法就是阻止浏览器滑动的默认行为：

document.body.addEventListener('touchmove', (e) => {
e.preventDefault();
}, { passive: false });

6.禁止双指缩放

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault()
    }
  }, false)

  var lastTouchEnd = 0
  document.documentElement.addEventListener('touchend', function (event) {
    var now = Date.now()
    if (now - lastTouchEnd <= 300) {
      event.preventDefault()
    }
    lastTouchEnd = now
  }, false)
  document.addEventListener('gesturestart', function (event) {
    event.preventDefault()
  })

兼容性问题 | 七日打卡

前言