the compatibility problem of ie
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的更多相关文章
- 利用zlib库进行zip解压
1:到zlib官网上下载zlib,本文下载的是1.2.8的版本. 2:进行./configure,然后make. 3:进入zlib库中的contrib/minizip/路径下make,生成的miniz ...
- shell脚本兼容linux/unix与windows/cygwin的基础（注意处理好CR, LF, CR/LF 回车 换行的问题）
shell脚本兼容linux/unix与windows/cygwin的基础 :统一文本格式为:unix文本格式,即于LF为换行符(推荐方案) 在notepad上设置:编辑->档案格式转换-> ...
- 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 ...
- 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. ...
- 从git上拉下来的严选weex项目demo
项目地址 https://github.com/zwwill/yanxuan-weex-demo 在package.json里"author"之类后面加上 "privat ...
- 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 ...
- 基于Rust-vmm实现Kubernetes运行时
随着容器及K8s的广泛使用,越来越多的容器安全与隔离问题被暴露出来,如:容器逃逸.水平攻击.DDos攻击等严重威胁了办公和生产环境的安全与稳定,影响了业务的正常运行.安全容器技术孕育而生,产生了kat ...
- Understanding Responsive Web Design: Cross-browser Compatibility
http://www.sitepoint.com/understanding-responsive-web-design-cross-browser-compatibility/ In the las ...
- (转)The C10K problem翻译
The C10K problem 如今的web服务器需要同时处理一万个以上的客户端了,难道不是吗?毕竟如今的网络是个big place了. 现在的计算机也很强大了,你只需要花大概$1200就可以买一个 ...
随机推荐
- （五）目标检测算法之Faster R-CNN
系列博客链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html (二)目标检测算法之R-CNN https://www.cnbl ...
- JavaWeb-数据库基础
数据库基础 推荐阅读: 数据库:https://www.cnblogs.com/zwtblog/tag/数据库/ 数据库是学习JavaWeb的一个前置,只有了解了数据库的操作和使用,我们才能更好地组织 ...
- c++11 实现枚举值到枚举名的转换
效果 ``` ENUM_DEFINE ( Color, Red, Blue, ) EnumHelper(Color::Red) -> "Red" EnumHelper(Col ...
- java 注释与标识符
JAVA基础 注释与标识符 注释 书写注释是一个非常好的习惯 三种注释: 单行,多行,文档 .单行 ://注释 .多行:/* 注释 / .文档** 注释 */ 标识符 1. 关键字 2.标识符注意点 ...
- laravel 7 xlsx 数据导入至 数据库
网址: https://learnku.com/articles/32400 1:安装插件 环境要求 PHP: ^7.0 Laravel: ^5.5 安装方式 composer require maa ...
- SQLMAP-Tamper之较为通用的双写绕过
前言 21年省决赛的SQLITE注入就是用的双写绕过,当时是手搓代码打的,这几天想起来了,寻思着写个tamper试试. 一开始以为很简单,后来才发现有很多要注意的点,折磨了挺久. 等弄完才明白为什么s ...
- bash shell 快捷键
Bash Shell 快捷键: Ctrl + a - 跳到行首 Ctrl + e - 跳到行尾 Ctrl + k - 从光标处删除到行尾 Ctrl + l - 清屏,类似 ...
- 七天接手react项目 系列
七天接手react项目 背景 假如七天后必须接手一个 react 项目(spug - 一个开源运维平台),而笔者只会 vue,之前没有接触过 react,此刻能做的就是立刻展开一个"7天 r ...
- 华夏基金X袋鼠云：基金业数字化转型，为什么说用户才是解题答案？
"精准营销是以客户为中心,运用各种可利用的方式,在恰当的时间,以恰当的价格,通过恰当的渠道,向恰当的顾客提供恰当的产品." 这是学者许瑾在科特勒精准营销理论的基础上,从实践的角度对 ...
- Linux 环境下安装 Nexus 私服存储库
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.nexus私服存储库简介 Nexus 是一个强大的maven仓库管理器,它极大地简化了本地内部仓库的维护和外部仓库的访问.,还可以用来创建yum ...