zoukankan      html  css  js  c++  java
  • 记录遇到的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: 32px9; //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之后的,所以这里要注意去掉

  • 相关阅读:
    Hello,world的几种写法!
    浮动与清除浮动
    css中表格的table-layout属性特殊用法
    CSS之照片集效果
    CSS之transition过渡练习
    CSS之过渡简单应用—日落西山
    CSS之立方体绘画步骤
    CSS之立体球体
    transform
    Vue.sync修饰符与this.$emit('update:xxx', newXXX)
  • 原文地址:https://www.cnblogs.com/Brose/p/IE8_compat.html
Copyright © 2011-2022 走看看