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. 论文翻译:2020_DCCRN: Deep Complex Convolution Recurrent Network for Phase-Aware Speech Enhancement

    论文地址:DCCRN:用于相位感知语音增强的深度复杂卷积循环网络 论文代码:https://paperswithcode.com/paper/dccrn-deep-complex-convolutio ...

  2. 二级py--day3

    二级PY--day3 1.结构化程序设计方法主要原则:自顶向下.逐步求精.模块化.限制使用goto语句 2.三种控制结构:顺序.选择和重复(循环) 3.结构化程序强调:程序的可复用性 4.结构化程序设 ...

  3. thinkPHP ajax 状态修改(上架修改为下架)

    <td> {if $v.status==1} <span class="top{$v.id}" name="0" onclick=" ...

  4. 认识变量(python)

    一.变量定义 1.1使用规范:先定义,后使用 1.2由三部分组成:变量名,赋值符号,变量值 1.3定义变量就是申请一个内存空间,python内部优化机制,对于数据量小的申请,就不重复开内存空间 二.变 ...

  5. netty系列之:netty中各不同种类的channel详解

    目录 简介 ServerChannel和它的类型 Epoll和Kqueue AbstractServerChannel ServerSocketChannel ServerDomainSocketCh ...

  6. ArcGIS温泉数据聚类分析、核密度分析

    这期博主给大家介绍下ArcGIS中的Riple's K 函数.与Kernel核密度分析. 首先从百度获取了湖南省的温泉数据.如图: 湖南省温泉数据 1.数据处理 (1)复制粘贴x.y坐标. (2)用快 ...

  7. 机器学习实战 | SKLearn最全应用指南

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/41 本文地址:http://www.showmeai.tech/article-det ...

  8. JDBC快速入门(附Java通过jar包连接MySQL数据库)

    •通过jar包连接mysql数据库 •下载jar包 Java 连接 MySQL 需要驱动包,官网下载地址为MySQL驱动包官网下载,选择适合的jar包版本进行安装 (记得安装的地址,下面导入包时会用到 ...

  9. Redis快速入门:初识Redis

    [IT168 专稿]在之前的文章中介绍了<Redis快速入门:选择Key-Value Store>,今天给大家介绍Redis的入门知识.Redis是一个开源的使用ANSI C语言编写.支持 ...

  10. LinuxCNC中RS-274/NGC解析器的编译和使用

    原文 http://blog.sina.com.cn/s/blog_a2a6dd380102vrai.html LinuxCNC是一个著名的开源数控软件,目前最新发行版本是:LinuxCNC 2.6. ...