IE 兼容问题笔记

IE 兼容问题笔记

css部分

  • white-space:nowrap;不生效【解决办法:添加一行样式(word-break:keep-all;)】

        white-space:nowrap;
        word-break:keep-all;
    
  • max-width:fit-content;不生效【解决办法:添加一行样式(display: inline-block;)或者(display: inline-flex;)】

        max-width:-webkit-fit-content;
        max-width:-moz-fit-content;
        max-width:fit-content;
        display:inline-block;
        /* display: inline-flex;  */
    
    
  • 换行

    p {
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        word-break: break-all
    }
    

    word-wrap:break-word 对长串英文不起作用,其实这是非常错误的,word-wrap:break-word照样能把一个长串英文或数字拆成多行。事实上,word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句;
    不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break:break-all则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。

  • 透明度

    .transparent_class
    {
         -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
         filter:alpha(opacity=50);
         -moz-opacity:0.5;
         -khtml-opacity:0.5;
         opacity:0.5;
    }
    
  • 禁止选中

    .none-select{
         cursor: not-allowed;
         pointer-events: none;
    }
    
  • 苹果手机无法输入

    *{
      -webkit-user-select:none;
    }
    *:not(input){
      -webkit-user-select:none;
    }
    

表单部分

  • ie下input框设置了readonly属性,鼠标还是可以点击光标聚焦【解决办法:放弃readonly属性,采用disabled属性方法】
        <input type="text" name="email" disabled="disabled">
    

js部分

  • ie下input框的change事件不能用enter键触发【解决办法:用键盘捕捉事件,判断键值是否等于‘13’(enter),满足条件再调用change事件】

    function IsIe() {
    
        if  ( !!window["ActiveXObject"]  ||  "ActiveXObject" in window ) {
            return true;
        } else {
            return false;
        }    
    }
    
    function getEnterEvent(e)  {
    
        if (isIe) {
            if (e.keyCode == 13) {
    
                //注意判断值没有发生变化时不做修改
            }
        }
    }
    
  • js获取canvas里面的图片

    var can = $('.widget-scene-canvas');
    var cans = can.getContext('2d');
    var string=cans.canvas.toDataURL('image/png');
    var iframe = "<iframe width='100%' height='100%' src='" + string + "'></iframe>"
    var x = window.open()
    x.document.open()
    x.document.write(iframe)
    x.document.close()
    
  • js IE下的refer

    function goTo(url){
          var ua = navigator.userAgent;
          if (ua.indexOf('MSIE')>=0) {
                  var rl = document.createElement('a');
                  rl.href= url;
                  document.body.appendChild(rl);
                  rl.click();
          } else {
                  location.href = url;
          }
    }
    function getReferer() {
          if (document.referrer) {
                  return document.referrer;
          } else {
                  return false;
          }
    }
    if (!getReferer()) {
          goTo('?x=3&r=' + Math.random());
    } else {
          alert(getReferer());
    }
    

扩展参考

posted @ 2019-10-22 08:24  绝技小嗨皮  阅读(202)  评论(0编辑  收藏  举报
Title