the compatibility problem of ie

ie8hack

ie8下的兼容问题处理:背景透明,css3圆角,css3和jquery支持部分css3选择器(例如:nth-child),支持html5的语义化标签,媒体查询@media等。

在html页面头部优先加载ie8需要的插件,因为部分插件需要依赖jquery,所以jquery需要最先加载。然后用IE的条件注释添加需要的脚本

样式css的添加:

如果是其他的样式.css就添加在里面的全局global.css后面



车险保费计算








脚本js的添加

如果是其他的插件和逻辑js就添加在 的上方。注意顺序,插件js优先添加。








css细节注意点

只要如上添加插件js就可以在ie8下使用css3和jquery css3选择器nth-child,html5语义化标签,如:section articel,媒体查询@media等。

圆角border-radius

the compatibility problem of ie_第1张图片

the compatibility problem of ie_第2张图片

兼容ie8css3圆角和阴影的PIE.htc文件的使用方法:

  • 直接将pie.htc文件放在项目结构里,如图1的红色块1

  • 如图1的红色块2 calcPrice.html添加的样式如图1的红色块3calcPrice.css里面的样式用到圆角或阴影,需在后面添加behavior: url(../../../public/css/PIE.htc);

  • 关键来了,behavior后面的url路径不是css相对pie,这个和我们平时的background-image使用不一样。这个路径是html相对的pie路径。你也可以理解成calcPrice.html这个页面添加图1红色块1上面的global.css 的路径就是behavior: url(../../../public/css/PIE.htc)的正确路径了,因为pie文件和global.css 文件在同一个目录下。

样式规范注意

  • 盒子阴影:

         box-shadow: 1px 1px 1px #dedede;
        -moz-box-shadow: 1px 1px 1px #dedede;
        -webkit-box-shadow: 1px 1px 1px #dedede;
        behavior: url(../../../public/css/PIE.htc);
    
  • 圆角

        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        behavior: url(../../../public/css/PIE.htc);
    
  • ie8背景图片没生效?

    例子: background: url(../images/carInfo.png)no-repeat 0 0;
    以上这样的路径是正确的,在chrom下完全没问题,为什么到了ie8,背景图就显示不了?
    
    解决办法很简单
     background: url(../images/carInfo.png)  no-repeat 0 0;
    在url()后面加上两个空格就可以了。
          
    

  • 娇气的ie8,按照上面使用的pie.htc的圆角和盒子阴影,发现元素隐藏不见了!!!!
    解决办法:在需要用圆角和阴影的元素样式上加上position:relative; 就可以了。


ie8背景透明opacity

  • 在ie8下背景透明而透明层上没文字或图片内容的时候,可以在opacity=0;下一行直接添加 filter:Alpha(opacity=0);

  • 但是透明的背景上有内容的时候,在ie8只上面加了filter:Alpha,是不是觉得就像你大冬天在浴室里带着眼镜洗热水澡看到的情景。。。。。眼前一片朦胧哇~~~

    
      假设我们需要设置下面的div背景透明而文字不透明
      
    我是文字,我不想被透明啊~

/*遮盖层公共样式*/
    .coverModal{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        margin-left: -6%;
        z-index: 9999;
   }
.coverBg {
    height:100%;
    background-color: rgba(0,0,0,0.5);
    /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}

.coverBg .coverCon{
    color: #FFFFFF;
}
@media \0screen\,screen\9 {
    /* 只支持IE6、7、8 */
    .coverBg {
        background-color:#000000;
        filter:Alpha(opacity=20);
        position:static; 
        /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
        *zoom:1; 
        /* 激活IE6、7的haslayout属性,让它读懂Alpha */
    }
    .coverBg .coverCon{
        position: relative;
        /* 设置子元素为相对定位,可让子元素不继承Alpha值 */
    }
}    

ie其他hack

background-color:red;
background-color:red\0;  /* ie 8/9*/
background-color:blue\9\0;  /* ie 9*/

/*ie11 css hack*/ 
@media all and (-ms-high-contrast:none) { 
*::-ms-backdrop, .class名字 { 里面的样式:样式值;} 
} 

/*ie10 css hack*/ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
.class名字 { 里面的样式:样式值;} 
}
  

本文转载于:the compatibility problem of ie

你可能感兴趣的:(the compatibility problem of ie)