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

最新推荐文章于 2018-07-31 18:09:59 发布

bangman4009

最新推荐文章于 2018-07-31 18:09:59 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Brose/p/IE8_compat.html

本文总结了在IE8浏览器中遇到的各种兼容性问题及解决方案，包括伪元素:first-child的替代方案、透明度设置方法、input元素垂直居中的技巧、transition动画在Safari中的调整方式以及IE8背景图片设置注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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之后的，所以这里要注意去掉

转载于:https://www.cnblogs.com/Brose/p/IE8_compat.html