[分享]css兼容ie内核eslint报错

CSS兼容IE内核是Web前端工作中经常遇到的一个问题。因为IE浏览器对于CSS的解析方式和其他浏览器不同，所以在写CSS时需要格外注意，以保证网站在IE浏览器中的兼容性。而在开发过程中，我们可能会碰...

CSS兼容IE内核是Web前端工作中经常遇到的一个问题。因为IE浏览器对于CSS的解析方式和其他浏览器不同，所以在写CSS时需要格外注意，以保证网站在IE浏览器中的兼容性。

而在开发过程中，我们可能会碰到一些CSS代码在其他浏览器中正常工作，但在IE中出现问题。这时候可以通过一些特定的CSS hack来解决问题，但这并不是一个好的解决方案。因为这样的hack可能会导致代码臃肿、不易维护，并且会对网站性能造成影响。

除了CSS兼容IE内核之外，我们还经常会遇到eslint报错的问题。ESLint是一款用于Javascript代码检查的工具，它能够检查代码中的语法错误、不规范的写法等问题。但有些时候，ESLint会错误地报出一些警告或错误，这可能会让开发者感到困扰。

为了解决这些问题，我们可以采用一些策略。比如说，在写CSS时，我们可以遵循一些通用的CSS写法，以确保代码的兼容性。同时，我们也可以使用一些CSS预处理器（例如Less、Sass等工具），以使代码更加简洁、易于维护。

而在解决ESLint报错时，我们可以参考一些规范的写法，以减少出错的可能性。比如说，我们可以使用ESLint中提供的一些配置（如配置文件），调整代码检查的规则、严格程度等信息。

如下是一个可能会导致IE浏览器出现兼容性问题的CSS代码：

.main {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

这里的display: flex;是CSS3中的一项新特性，它能够让元素的子元素按照一定的规则排列。但在IE浏览器中，它可能会出现不兼容的问题，导致元素排列错乱。

可以使用如下的CSS hack来解决问题：

.main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-around;
  -ms-flex-pack: justify;
  justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

这样虽然可以解决问题，但会让代码变得更加臃肿。因此，我们在写CSS时应该遵循代码尽量简洁的原则，以避免产生过多的hack代码。