[分享]css兼容性解决方案面试题

在开发网站时，我们通常使用CSS来控制网页的样式，但是不同的浏览器对CSS的支持不同，这就导致了网页在不同浏览器中显示效果不一致的问题。因此，CSS兼容性成为了一个常见的问题。CSS兼容性通常涉及三个...

在开发网站时，我们通常使用CSS来控制网页的样式，但是不同的浏览器对CSS的支持不同，这就导致了网页在不同浏览器中显示效果不一致的问题。因此，CSS兼容性成为了一个常见的问题。

CSS兼容性通常涉及三个方面：

• 浏览器对CSS支持的差异；
• 不同版本的浏览器对CSS的支持差异；
• 不同操作系统上的浏览器对CSS的支持差异。

那么如何解决CSS兼容性问题呢？

1.使用CSS hacks

 <!-- [if IE] -->
    <link rel="stylesheet" type="text/css" href="ie.css" />
  <!-- [endif] --> 

2.使用CSS Reset

 * {
    margin: 0;
    padding: 0;
  } 

3.使用CSS预处理器

 body {
    background-color: $primary-color;
  } 

4.使用autoprefixer

 display: flex;
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.75);
          box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.75); 

5.使用CSS3各种新属性时，要加上前缀

 .box {
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.75);
       -moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.75);
            box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.75);
  } 

总之，要写好CSS样式需要考虑到不同浏览器的兼容性问题，合理运用CSS hacks、CSS Reset、CSS预处理器等技术，才能让你的网站更加美观，更加流畅，也更加适用于不同的用户和设备。