记录遇到的IE8兼容性问题汇总

1,伪元素:first-child不起作用,需要单独指定样式名称

2,透明度表示方法,尤其在函数中表示

@mixin opacity($value) {
  -webkit-opacity: $value;
  -moz-opacity: $value;
  -ms-opacity: $value;
  -o-opacity: $value;
  filter: alpha(opacity=$value*100); //0~100的,所以这里需要*100
  opacity: $value;
}

3,input文字垂直居中,在IE8-之文字不默认垂直居中。解决:必须设置line-height

4,接文3:兼容了IE的文字不居中之后,打开Safari再看,placeholder竟然偏上了,经过查可知Safari不需要line-height,那么我们带上IE8的hack,“\9",ex:

input{
    height: 32px;
    line-height: 32px\9; //ie8的hack写法
}

 5,transation在Safari浏览器中的bug

  目标效果为:页面加载的时候登录框从页面底部飞入

  css:

.login-form{
    position:aboslute;
    top:100%; 
transation:top .6s ease: }

 js:

$(".login-form").css("top","200px");

 Safari浏览器根本就不认识”top:100%"卧槽了,必须给定一个具体的值,或者说使用js去将login-form的top初始值给设定好

6,IE8的背景图片设置:

background: url("../images/box_check_bg.png") no-repeat !important;

如果属性值加上!important的话IE8会加上两层背景图片,一层是设置background-size之前的,一张是加了background-size之后的,所以这里要注意去掉

posted @ 2016-04-25 14:02  嘿煤贵  阅读(256)  评论(0)    收藏  举报