ie8hack

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

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

样式css的添加：

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>车险保费计算</title>

<script src="../../../public/js/jquery-1.11.2.min.js"></script>

<!--[if lte IE 8]>

<script type="text/javascript" src="../../../public/js/html5.js"></script>

<script type="text/javascript" src="../../../public/js/respond.min.js"></script>

<script type="text/javascript" src="../../../public/js/selectivizr-min.js"></script>

<![endif]-->

<!--[if IE 6]>

<script type="text/javascript" src="../../../public/js/DD_belatedPNG_0.0.8a.min.js"></script>

<script>

    DD_belatedPNG.fix('*');

</script>

<![endif]-->

<!--全局css-->

<link rel="stylesheet" type="text/css" href="../../../public/css/global.css"/>

</head>

脚本js的添加

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

<script src="../../../public/js/jquery.easydropdown.js"></script>

<!--全局js-->

<script src="../../../public/js/global.js"></script>

<!--逻辑js-->

<script src="../js/calcPrice.js"></script>

</body>

</html>

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背景透明而文字不透明
    
  <div class=" coverModal">        <!--用于定位 -->
    
    <div class="coverBg ">        <!--背景透明的块 -->
    
      <div class="coverCon">我是文字，我不想被透明啊~</div>   <!--主体内容 -->
    
      </div>
    
  </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的更多相关文章

  1. 利用zlib库进行zip解压

    1:到zlib官网上下载zlib,本文下载的是1.2.8的版本. 2:进行./configure,然后make. 3:进入zlib库中的contrib/minizip/路径下make,生成的miniz ...

  2. shell脚本兼容linux/unix与windows/cygwin的基础（注意处理好CR, LF, CR/LF 回车 换行的问题）

    shell脚本兼容linux/unix与windows/cygwin的基础 :统一文本格式为:unix文本格式,即于LF为换行符(推荐方案) 在notepad上设置:编辑->档案格式转换-> ...

  3. Google Spanner vs Amazon Aurora: Who’ll Get the Enterprise?

    https://www.clustrix.com/bettersql/spanner-vs-aurora/ Google Spanner versus Amazon Aurora In July 20 ...

  4. Known BREAKING CHANGES from NH3.3.3.GA to 4.0.0

    Build 4.0.0.Alpha1 =============================   ** Known BREAKING CHANGES from NH3.3.3.GA to 4.0. ...

  5. 从git上拉下来的严选weex项目demo

    项目地址 https://github.com/zwwill/yanxuan-weex-demo 在package.json里"author"之类后面加上 "privat ...

  6. MySQL 5.6 Reference Manual-14.7 InnoDB Table Compression

    14.7 InnoDB Table Compression 14.7.1 Overview of Table Compression 14.7.2 Enabling Compression for a ...

  7. 基于Rust-vmm实现Kubernetes运行时

    随着容器及K8s的广泛使用,越来越多的容器安全与隔离问题被暴露出来,如:容器逃逸.水平攻击.DDos攻击等严重威胁了办公和生产环境的安全与稳定,影响了业务的正常运行.安全容器技术孕育而生,产生了kat ...

  8. Understanding Responsive Web Design: Cross-browser Compatibility

    http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/ In the las ...

  9. (转)The C10K problem翻译

    The C10K problem 如今的web服务器需要同时处理一万个以上的客户端了,难道不是吗?毕竟如今的网络是个big place了. 现在的计算机也很强大了,你只需要花大概$1200就可以买一个 ...

随机推荐

  1. iOS桌面小插件 Widget Extension

    iOS桌面小插件 Widget Extension 这个插件时iOS14以后才出现的,基于SwiftUI 旧项目新建时可能一堆错误,其中一个时要把插件target 开发sdk版本设置为14.0以上 新 ...

  2. Qt：手动编辑UI文件——This file can only be edited in Design mode

    UI文件是只读文件,正常情况下我们只能在"Design"模式下,通过调整各种控件的方式间接修改它. 但是有时我们遇到许多重复性的工作,比如向某个Combobox中添加一系列的Ite ...

  3. Python：lxml

    学习自: python3解析库lxml - Py.qi - 博客园 lxml官方文档 lxml官方文档--lxml中的类.方法使用,如果需要查看某些方法的具体用法,就到这个网页下 python爬虫系列 ...

  4. Python 并发编程（上）

    Python 并发编程 参考文献:https://gitee.com/wupeiqi/python_course 并发编程:提升代码执行的效率.原来需要 10 分钟执行,并发处理后可以加快到 1 分钟 ...

  5. WPF优秀组件推荐之Stylet（一）

    一.简介 Stylet是基于WPF的一款MVVM组件,虽然WPF本身是自带MVVM功能的,但实现起来不是很方便 ,通过Stylet,用户可以用很少的代码就能享受MVVM带来的舒适体验. 目前Style ...

  6. JZ-030-连续子数组的最大和

    连续子数组的最大和 题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和, 当向量全为正数的时候,问题很 ...

  7. JUC知识点总结（知识点见内部目录）

    目录 JUC是什么 锁 Synchronized VS Lock 实现差异 Synchronized & Lock 总结 Synchronized锁的对象是什么 生产者&消费者 只有两 ...

  8. MySQL 8.0无法通过Navicat远程连接 1045 - Access denied for user 'root'@'::1' (using password: YES) 的解决办法

    用navicat远程连接数据库的时候无法连接,提示信息:1045 - Access denied for user 'root'@'::1' (using password: YES). 是由于密码策 ...

  9. 基于Drone+Gogs流水线-全面认识轻量级云原生CI引擎Drone

    1. 介绍 Drone by Harness 是一个基于Docker容器技术的可扩展的持续集成引擎,用于自动化测试.构建.发布.每个构建都在一个临时的Docker容器中执行,使开发人员能够完全控制其构 ...

  10. 【基础】工作中常用的linux命令，经常会被面试官问到

    前言 面试经常会问到一些Linux操作命令,下面就工作中常用的和面试问的频率较高的命令做详细描述. 常用命令 修改密码:passwd 用户名 切换用户名:su 用户名 查看当前路径:pwd 调整路径: ...