美文网首页
ie8兼容问题

ie8兼容问题

作者: 逍遥g | 来源:发表于2017-06-20 23:46 被阅读0次

    ie8中遇到的兼容问题以及解决方案

    一.CSS3

      1.可以通过在css中引入pie.htc,处理兼容问题(可处理的属性)

          -webkit-box-shadow: 0 1px 5px #ff2826;

          -webkit-border-radius: 4px;等

          最后在该样式中引入pie.htc

    例子:.index-tab li a:hover{

          box-shadow: 0 5px 20px #aeaeae;

         -webkit-box-shadow: 0 5px 20px #aeaeae;

          behavior: url(PIE.htc);

        }

      2.ie8不支持nth-child,但支持first-child,可以通过转化写法来处理问题,span:nth-child(2)可以转写为span:first-child+span,可以使ie8显示该内容

      3.ie8对background的各个属性兼容性不良好

        解决办法:

          rgba(0,0,0,)黑色透明度--------background: rgba(255,255,255,.8)

                          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c8000000,endColorstr=#c8000000);

          rgba(255,255,255,)白色透明度--------background: rgba(255,255,255,.8)

                              filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#c8ffffff,endColorstr=#c8ffffff);

    附上不同透明度对照表:

    4.ie对c3很多属性都不支持,等后期具体补充

        例如:background-position/background-size/多重背景设置等

    5.解决ie8 select下拉按钮换新图片问题(略有缺陷下拉框子元素任然为父元素大小overflow没办法隐藏,优雅降级)

      给select的添加父盒子,父元素设置overflow:hidden;

      参考文档:http://ourjs.com/detail/551b9b0529c8d81960000007

      附加:ie8 select文字垂直不居中,设置padding:8px 0;

    二、

    #box{

    color:red; /* 所有浏览器都支持 */

    color:red !important;/* Firefox、IE7支持 */

    _color:red; /* IE6支持 */

    *color:red; /* IE6、IE7支持 */

    *+color:red; /* IE7支持 */

    color:red\9; /* IE6、IE7、IE8支持 */

    color:red\0; /* IE8支持 */

    }

    相关文章

      网友评论

          本文标题:ie8兼容问题

          本文链接:https://www.haomeiwen.com/subject/motzqxtx.html