the compatibility problem of ie

GeekQiaQia 发布于2019-08-01 15:12 / 1034人阅读

摘要：下的兼容问题处理背景透明，圆角，和支持部分选择器例如支持的语义化标签，媒体查询等。在页面头部优先加载需要的插件，因为部分插件需要依赖所以需要最先加载。注意顺序，插件优先添加。这个路径是相对的路径。

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

兼容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 screen,screen9 {
    /* 只支持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;  /* ie 8/9*/
background-color:blue9;  /* 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名字 { 里面的样式:样式值;} 
}

云服务器 GPU云服务器 problem Problems the sdp for the webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49824.html

the compatibility problem of ie

摘要：下的兼容问题处理背景透明，圆角，和支持部分选择器例如支持的语义化标签，媒体查询等。在页面头部优先加载需要的插件，因为部分插件需要依赖所以需要最先加载。注意顺序，插件优先添加。这个路径是相对的路径。 ie8hack ie8下的兼容问题处理：背景透明，css3圆角，css3和jquery支持部分css3选择器（例如：nth-child）,支持html5的语义化标签，媒体查询@media等。...

DobbyKim 2019-08-30 13:00 评论0 收藏0
A: 如何实现 Lazy Load？

摘要：最近面试了几家公司，他们不约而同都问到了这个问题了解吗其实是对图片的一种延迟加载技术，直到用户滚动图片出现在用户可视范围时才把它加载出来。我在上亲身实践了一下，然而发现，总是返回，其他两种方法都正常获取到了值。最近面试了几家公司，他们不约而同都问到了这个问题：了解 Lazy Load 吗？ Lazy Load is delays loading of images in long ...

Miyang 2019-08-20 15:22 评论0 收藏0
Better Way to Use orientationchange Event on Mobil

Preface When I was using orientationchange event, I met a few bugs. So, I take it down. Main compatibility problem When I was testing my code on my android, it was ok. However, it doesnt work on my bo...

Julylovin 2019-08-23 13:41 评论0 收藏0
Python-logging

Next When to use logging The logging functions are named after the level or severity of the events they are used to track. The standard levels and their applicability are described below (in increasin...

U2FsdGVkX1x 2019-07-25 11:24 评论0 收藏0
actor ceo ex3ndr 介绍的actor,java,gwt,j2obj的框架体系

摘要：原文来自介绍的的框架体系这是架构中最具备吸引力，也是最强大的部分。国内访问不到，因此转过来。暂时原文原样转，未作翻译。原文来自: https://medium.com/@ex3ndr/ho... actor ceo ex3ndr 介绍的actor,java,gwt,j2obj的框架体系, 这是actor架构中最具备吸引力，也是最强大的部分。国内访问不到，因此转过来。暂时原文原...

wind5o 2019-08-14 17:47 评论0 收藏0