IE 兼容问题笔记

IE 兼容问题笔记

• 解决IE11兼容HTML5 设置
• document.body的一些用法以及js中的常见问题
• flex布局浏览器兼容处理 ie8, ie9
• css3 media媒体查询器用法总结

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

表单部分

• 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) {
  
              //注意判断值没有发生变化时不做修改
          }
      }
  }
  
  

扩展参考

• 看了很多优秀配色方案，还是不会配色
• css是如何实现在页面文字不换行、自动换行、强制换行的方法
• 利用div实现input输入框
• 揭秘CSS