107.ie和chrome 常见css兼容问题

自定义模板 (1).jpg

• 父元素设置min-height,子元素设置100%。子元素撑不满问题，在父元素的父元素上设置display:flex。
  原理：display:flex取决于子元素的高度。
  解决：参考
• 谷歌和ie浏览器解析flex:1问题。谷歌浏览器设置flex:1会自动撑满剩余空间，ie浏览器还是按照内容的大小来撑开的。
  解决：参考
• ie浏览器下设置使用伪元素::after设置边框错位问题,父元素设置flex布局，由于子项设置了height:100%会充满整个容器，因此会把边框的空间挤没了，设置box-sizing:border-box不管用。

  .header-list.current::after {
    width: 131px;
    height: 6px;
    background: $mainColor;
    position: absolute;
    bottom: 0;
    content: "1";
  }

ie下的样式，设置了:after作为边框但是会被挤到下一行里去。

image.png

chrome下样式：

image.png
解决：
使用绝对定位布局

  .header-list.current {
    color: $mainColor;
    position: relative;
    box-sizing: border-box;

    .border {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 131px;
      border-color: $mainColor;
      border-bottom-width: 6px;
      border-bottom-style: solid;
    }
  }

2022年7月20日更新

• ie9浏览器不支持classList属性
  解决：给IE9及其以下等不支持classList属性的浏览器,添加classList属性
  https://github.com/jwilsson/domtokenlist/blob/master/dist/domtokenlist.js
• flex布局支持到ie10
  解决：项目中使用的flex布局子元素使用float:left
• 不同浏览器默认字体显示不一致问题

.parent{
  display:flex;
    .child{
        float:left;
    }
}

解决：使用@font-face，引入字体包，ie只支持eot格式的字体包，需要自己下载

@font-face {
  font-family: 'Source Han Sans CN';
  src: url('./SourceHanSansCN-Normal.ttf');
  font-weight: normal;
  font-style: 100;
}
* 其他ie9兼容flex布局问题
[https://www.csdn.net/tags/MtjaYg5sNTkzOTQtYmxvZwO0O0OO0O0O.html](https://www.csdn.net/tags/MtjaYg5sNTkzOTQtYmxvZwO0O0OO0O0O.html)

持续更新