css样式一些兼容ie9问题

下面都是一些关于博主自己在写项目时遇到的一些兼容ie的css样式问题:

渐变色

在ie9及以下是不支持gradient的。所以要用渐变色的话，需要使用如下属性，该属性不适用于safria浏览器，并且，#fff不可以简写

 FILTER: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#018ee8');

GradientType的值0和1; 0表示纵向; 1表示横向

ie9中使用这个属性,会导致radius失效, 而在可给父元素设置radius和overflow:hiden实现效果  

select下拉默认样式清除

在ie10和ie11中可以使用下面这行代码将select的默认下拉三角隐藏 

select ::-ms-expand{display:none}

 在ie9及以下上述方法就不会起到作用，我是使用‘障眼法’，声明一个p标签，使用绝对定位将下拉三角按钮覆盖，并给p标签一个点击穿透的属性pointer-events

p{
    background-color:white;
    pointer-events:none;
    display:inline-block;
}

这样就可以把默认样式 '清除' 啦,也不会影响点击效果,但是如果select不够宽的话,可能会将文字覆盖,
如果还需要自己设置下拉三角按钮的话,可以通过背景图自行添加

flex布局

flex布局在IE10和IE11中使用具有 '时效性' , 在标签是行内标签的时候justify-content的效果是不生效的, 这个时候我们只需要将我们标签转换为行内块就可以了, 但是在ie9及以下中未找到合适方法去兼容处理

块级元素

好像ie9对块级元素很有偏见一样, 在ie10中生效的样式在ie9中都会 '爆炸' , 但是有些时候我们只需要将这些 '爆炸' 的标签转成行内块之后就正常了,但还会有一丢丢的位置偏移(应该可以接受)

img标签

在ie9中我们在浏览自己写的页面时,有时会发现图片会自动的被拉长将近一倍的高度导致图片变形, 但是在其他的浏览器就没问题, 这个原因主要是因为我们未设置图片的高度,而是选择了自适应高度, 如果图片是固定大小我们可以直接固定图片高度,但是如果图片的宽度不确定,我们可以获取图片的宽度来设置图片的高度,这样图片被拉长的问题就解决了