-ms-high-contrast 区分IE和其他浏览器

mdn官网为此特性解释为

The -ms-high-contrast CSS media feature is a Microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.

High Contrast Mode is a specialized display mode that prioritizes making content as legible as possible by dynamically replacing foreground and background colors with a user-specified theme. For web content, theme colors are mapped to content types.

大概解释就是高对比度模式下面尽可能多的显示，动态的将背景颜色替换为用户特定的主题。 因为-ms是microsft extension,所以可以用作分辨IE浏览器和其他

有四个参数可以选择：分别是none,active,black-on-white,white-on-black.其中none已经在 Microsoft Edge 18.中废弃，但仍可以用作辨别IE浏览器10+版本的方法。 因此代码为下，可以在css中直接使来用于区别IE和其他浏览器

@media screen and (-ms-high-contrast:none) {
            
 }

---

icon font转换过程中渐变色问题

在将svg文件转化为font icon 的过程中，可能会遇到一个问题，就是单色的icon不支持渐变效果，因此需要用另外的代码来做兼容

h1 {
  background: linear-gradient(#eee, #333);
  background-clip: text;
  text-fill-color: transparent;
}

其中 background 需要注意的是，渐变颜色需注意上下顺序，不然会搞错原来svg的颜色方向。ps：IE浏览器不支持渐变，所以只能填充一个颜色。

参考：mdn官网的文档。

---

icon 三角形的阴影

在日常的任务中，有遇到一个问题，需要在对话框的三角形图标加外阴影，此时我们常用的box-shadow已经不奏效了，这时候就要叫上另一个兄弟drop-shadow()帮忙了。

其中的几个需要注意，要根据你的三角形的大小来调整。

offset-x 
offset-y (required)
offset-x指定水平距离，其中负值将阴影放置到元素的左侧。offset-y指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 0，则阴影直接放置在元素后面。
blur-radius (optional)
阴影的模糊半径，指定为 <length>。值越大，阴影就越大，也越模糊。如果未指定，则默认为 0，从而产生清晰、不模糊的边缘。不允许有负值。
spread-radius (optional)
阴影的扩展半径，指定为 <length>. 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为0，阴影的大小将与输入图像相同。

---

具体使用情况见官网文档

-ms-filter

总结

IE浏览器是我在日常工作中需要特殊处理和注意的地方，尤其是css和js的兼容性以及svg转换icon方面，这些都是我在实际工作中的经验，希望对你有用。