likes
comments
collection
share

CSS && JS 兼容性问题

作者站长头像
站长
· 阅读数 41

吐槽

短短换工作4个月,我觉得自己工作了4年一样,像个骡子一样不停的写代码, 框架不熟悉,架构不熟悉,而且老板还不给时间熟悉,美名曰牛x的程序员应该有一边完成工作一边熟悉项目中的框架的能力(对不起我无能,ps我觉得老板pua我),回归正题,总结一下工作中遇到的兼容性问题,以及解决方案,(希望每个前端遇到相同的问题可以无脑解决)CSS兼容性问题才是最磨人的哇~ /(ㄒoㄒ)/~~

CSS兼容性问题以及解决方案

1. table td 嵌套的div, 无法占满单元格

解决方法: 使用css hacks :

  .fix_height {
    height: 1px;
  }

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .fix_height {
      height: 100% !important;
    }
  }

  @-moz-document url-prefix() {
    .fix_height {
      height: 100% !important;
    }
  }
  • IE11, firefox td高度设置100%
  • Chrome, edge, td 高度设置1px

2. position sticky 不兼容IE11

解决方案: 使用了很多插件,貌似就 stickyfill 才解决了IE11的吸顶(这边有时间还是会自己实现一下的)

JS兼容性问题以及解决方案

1. 浏览器dataset的读取方式

  1. ie11 -> getAttribute("xxx")
  2. chrome, firefox, edge -> .dataset("xxxx")

学无止境