下面都是一些关于博主自己在写项目时遇到的一些兼容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中我们在浏览自己写的页面时,有时会发现图片会自动的被拉长将近一倍的高度导致图片变形, 但是在其他的浏览器就没问题, 这个原因主要是因为我们未设置图片的高度,而是选择了自适应高度, 如果图片是固定大小我们可以直接固定图片高度,但是如果图片的宽度不确定,我们可以获取图片的宽度来设置图片的高度,这样图片被拉长的问题就解决了