1、fireFox火狐兼容问题

将input设置为disabled之后。在firefox浏览器上无法触发任何事件

  • 解决办法一：换成readonly
  • 解决办法二：在disabled的input上弄上一个遮罩层

    2、展开语法展开对象不兼容 win10自带的 edge

    对象 数组展开运算符 ···

1599549306739511.pngimage.png

3、 无法修改鼠标小手的问题

设置 input 字体为0，并且将可自定义的元素覆盖在 input 上面就可以

  1. <div class="upload">
  2.   <input class="upload_file" type="file">
  3.   <div class="upload_box"></div>
  4. </div>
  6. // upload_box 覆盖在 input 上面
  7. <style lang="less">
  8.   .upload{
  9.      width: 60px;
  10.      height: 60px;
  11.      line-height: 60px;
  12.      border: 1px dashed #eaeaee;
  13.      text-align: center;
  14.      background-color: #f6f6f6;
  15.      border-radius: 8px;
  16.      cursor: pointer;
  17.      position: relative;
  18.      overflow: hidden;
  19.      cursor: pointer;
  20.     &_input{
  21.         -webkit-appearance: none;
  22.         position: absolute;
  23.         left: 5%;
  24.         top: 5%;
  25.         width: 100%;
  26.         height: 100%;
  27.         cursor: pointer;
  28.         font-size: 0;
  29.     }
  30.     &_box{
  31.           font-size: 20px;
  32.           font-weight: bold;
  33.           height: 100%;
  34.           width: 100%;
  35.           line-height: 100%;
  36.           position: absolute;
  37.           display: flex;
  38.           align-items: center;
  39.           justify-content: center;
  40.           pointer-events: none;
  41.           background-color: #fff;
  42.           border-radius: 8px;
  43.           cursor: pointer;
  44.     }
  45.     }
  46.  </style>

4、justify-content：center在IE11中不起作用

详情：https://xbuba.com/questions/45484229

  1. <div class = "LoaderText">
  2.     <a class="loader" [ngClass]= "{busyloader: IsBusy}" ></a>        
  3.     <p id = "txtLoader">{{BusyContent}}</p>
  4. </div>
  5. <style>
  6.   .LoaderText {
  7.     position: fixed;
  8.     height: 0;
  9.     width: 0;
  10.     display:-moz-box;
  11.     -moz-box-orient:horizontal;
  12.     -moz-box-pack:center;
  13.     -moz-box-align:center;
  15.     /* Safari and Chrome */
  16.     display:-webkit-box;
  17.     -webkit-box-orient:horizontal;
  18.     -webkit-box-pack:center;
  19.     -webkit-box-align:center;
  21.     /* W3C */
  22.     display:box;
  23.     box-orient:horizontal;
  24.     box-pack:center;
  25.     box-align:center;
  27.     /* IE10 */
  28.     display: -ms-flexbox;
  29.     -ms-flex-align: center;
  30.     -ms-flex-pack: center;
  31.     -ms-box-orient:horizontal;
  32.     top: 50%;
  33.     left: 50%;
  34.     white-space: nowrap;
  35. }
  37. .loader {
  38.     position: fixed;
  39.     border: 12px solid #f3f3f3; /* Light grey */
  40.     border-top: 12px solid #3498db; /* Blue */
  41.     border-radius: 50%;
  42.     width: 80px;
  43.     height: 80px;
  44.     animation: spin 2s linear infinite;
  45.     opacity: 0.5;
  46.     filter: Alpha(opacity=50);
  47. }
  49. #txtLoader {
  50.     Color: #f3f3f3;
  51.     font-size: 14px;
  52.     margin: 83px 0 0 10px;
  53. }
  54. </style>

5、定位居中兼容edge

如果外层盒子给的 fixed 定位，内层盒子给的 absolute 之后，在edge老版本浏览器上渲染就会出现渲染的位置跟显示的位置不一致的问题
解决：

这个时候只需要把fixed定位改为 absolute 定位就行

6、IE浏览器下，display:initial 无效

7、IE、Safari浏览器下，new Date(‘2021/01’) 返回 Invalid Date

解决：将解析的时间字符串添加进具体的某天，例如： new Date('2021/01/01') 

  1. const time = "2020/01"
  2. const newTime =  new Date(time+'/01').getFullYear()

8、IE、Safari浏览器下，new Date().getTime()返回 NaN

IE上无法对 2021-01-26 这种带有 - 中横线的时间字符串进行 new Date('2020-01-26').getTime() 解析 解决：将中横线 - 调换成 / 

  1. const time = "2020-01-26"
  2. const newTime =  new Date(time.replace(/-/g, "/")).getTime()

9、IE11 无法针对Map对象使用v-for指令

10、flex布局没有达到预期效果

正常场景：

正常情况，设置了 display:flex 之后，该元素的高度应该是由内部元素撑开，并且设置了高度

问题浏览器及场景：

在 IE11 及 谷歌68 版本上展示的效果为，内部元素撑不开总体高度

image.png

image.png
问题避免及解决：

查了很多资料，都没找到原因。只能提前避免了

  1. .selecedRange_body_scroll_item{
  2.     min-height:30px;
  3. }

webpack 配置 支持 兼容IE10+、edge44+、Firefox30+、谷歌40+

入口文件引入

  1. // import "@babel/polyfill";
  2. import "core-js/stable";
  3. import "regenerator-runtime/runtime";

项目根目录新建 **.babelrc.js** 

  1. {
  2.     "presets": [[
  3.       "@babel/preset-env", { // 取代了preset-es20**系列的babel预设
  4.            "corejs": 3,
  5.            "useBuiltIns": "entry" 
  6.         // 在入口文件的顶部引入core-js/stable和regenerator-runtime/runtime
  7.        }
  8.   ]],
  9.     "plugins": [
  10.       "@babel/plugin-proposal-object-rest-spread", // 解决 对象无法结构的兼容
  11.       "@babel/plugin-transform-runtime", // 转译代码
  12.       "transform-vue-tsx", // 让vue支持tsx写法
  13.       "@babel/plugin-syntax-dynamic-import",
  14.     ],
  15. }

11、页面元素在 opear 浏览器上出现“搜索”和 “复制”两个按钮

原因：
在 opear 浏览器 40 版本之后，在选中文本的时候，浏览器会默认在页面上添加两个按钮 “复制”和 “搜索”。他们设计的初衷可能是希望借此简化用户需要选中文本右键的简化操作，但是 对于开发人员来说，这是个不确定因素

解决：
既然按钮是由于文字选中引起的，那么禁止文字选中就可以！

  1. .text{
  2.     user-select:none;
  3. }

注意：
如果既需要文字选中功能，又需要去掉那两个按钮的话，本方法不适用，只能另寻它法了！！！！

12、element 的 checkbox 和 dialog 结合的时候，在火狐浏览器上选中会有轻微的上移闪动效果

原因：未知
导致的写法及背景：

多选按钮竖向排版，以及label属性进行了超出隐藏

解决：

给 el-checkbox 使用 flex 布局

后续的问题：

这会在 IE 浏览器上出现，label 和选中按钮撑不起 一行的高度，导致外层盒子高度塌陷（也就是本文档的第 10 条问题）

后续问题的解决办法：
给外层的盒子。也就是 el-checkbox 增加一个固定的高度 height

13、webpack打包之后部分样式丢失

场景：
一次打包之后，发现一个事，就是本地开发模式下有些样式是起作用的，但是打包部署线上之后，样式在浏览器不起作用了。

排查：
1、检查打包之后的产物 dist 目录的代码，发现是正常的，样式也没有丢失
2、既然样式是在打包之后不生效，项目中打包模式下生效的，并且对 CSS 样式起作用的就那几个，一个个注释，一次次打包，最后发现是 optimize-css-assets-webpack-plugin 会导致这个问题。
3、但是 optimize-css-assets-webpack-plugin 这个插件又必须需要，所以继续想会不会有什么其他的原因导致的，
4、经过查看打包之后的产物之后，发现 optimize-css-assets-webpack-plugin 会将同一个文件中的相同属性进行合并处理，然后突发奇想，将合并的另外类下的相同样式注释掉，再打包部署，发现 需要检查的元素的这个样式生效了。
5、这次试验，就说明可能是合并之后样式失效，但是样式为啥会失效呢？
6、后来再查看一下代码发现，之前 style 上加了 scoped，样式中写样式的时候，加了 /deep/，但是后来加了顶级类名包裹，并随之去掉了 scoped，这个时候又没有去掉 样式中的 /deep/所以导致了样式虽然写了，但是到了线上找不到 指定元素
7、但是换了更新版本的浏览器就没那个问题了。（没问题：v97+，有问题：v72+ ）

原因：
1、经过上面的排查，也就说明，代码合并之后，其中一个选择器没生效，会导致合并的其他选择器的样式也会生效。

解决：
scoped和 deep 配套使用，要么都使用，要么都不使用。

14、element 的 tabel 组件在 Safari 浏览器下表格错位

场景：
el-tabel 在有固定列的情况下，在Safari 上会出现 固定列和非固定内容表格错位的问题

组件版本：element-ui @2.15.6+

问题分析思路：
1、刚开始想以为是自己代码的问题，但是排查了之后，发现也是按照官方文档写的
2、于是去 github 的 element-ui 的 issues区 去搜索了一下表格错位的问题，发现这个问题是17年引入的。到现在官方也没有解决，中间有好几位提出过 issues可以见 issues（4976）和 issues（21939） issues（18923） issues（10835） 但是都由于没有官方给出真正的解决办法
3、上述的 issues 的一些评论给出了一种解决办法：监听表格数据，然后调用表格内部的 doLayout方法。
4、但是在我这项目中并不起作用
5、无奈只得去看官方源码打断点查看
6、最后查到，原来在 Safari 浏览器中，渲染的字体会比其他浏览器稍微宽一点点，并且会将字符后面的换行符给渲染出来，导致意外的换行。但是浏览器的开发工具又看不出来，导致获取的表格内容总宽度虽然和其他浏览器的宽度一致，但是在渲染在页面上的时候，表格会出现错位的问题

解决：
给表格的单元格内的元素给上一个空白符不换行的样式就可以

  1. .el-table{
  2.   /* 解决element 有固定列的表格在 Safari 上出现表格错位的兼容问题 */
  3.   .el-table__cell {
  4.       * {
  5.           white-space: nowrap;
  6.       }
  7.   }
  8. }