css不兼容ie10

CSS 在不同的浏览器中可能存在不兼容的问题，其中包括广为人知的 Internet Explorer 10 (IE10)。IE10 是微软公司发布的一款网络浏览器，但其 CSS 兼容性并不理想，这意味着开发者需要特别注意以确保网站在 IE10 上的正常运行。

/* 以下是一些常见的 CSS 不兼容 IE10 的问题：*/

/* 1. flexbox 布局 */
.container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

/* 2. 文字水平垂直居中 */
.container {
  position: relative;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* 3. 渐变效果 */
.container {
  background: linear-gradient(#ffffff,#000000);
}

/* 4. 视口单位 */
.container {
  font-size: 3vw;
}

/* 开发者在使用这些功能时应该特别注意 IE10 的支持情况，如果必须应用，则需要添加兼容性代码，例如：*/

/* flexbox 布局 */
.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* 文字水平垂直居中 */
.container {
  position: relative;
  display: table; /* IE10 的 hack */
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: table-cell; /* IE10 的 hack */
  vertical-align: middle; /* IE10 的 hack */
}

/* 渐变效果 */
.container {
  background-color: #ffffff; /* IE10 不支持渐变 */
  background-image: linear-gradient(#ffffff,#000000);
}

/* 视口单位 */
.container {
  font-size: 14px; /* 设置一个 fallback */
  font-size: 3vw;
}

尽管 IE10 在 CSS 兼容性方面存在一些问题，但重要的是开发者应该意识到这些问题，并采取相应的措施以确保网站在 IE10 上的良好用户体验。使用 Polyfill 或添加兼容性代码是解决这些问题的常见方法。