关于IE兼容问题
针对IE6/7/8 可以分为两种模式:怪异模式(Quirks mode)和标准模式(Standards mode),在IE6以下版本下显示怪异模式,border和padding都包含在width中
使用IE7编译:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
也可以引进相应的js插件去解决html5和css3的问题,但是只能在小范围内或者单页中使用,代价是消耗性能 一、针对IE hack的技巧进行总结:
有四种方法: 1、条件注释法 2、类内属性前缀法 3、选择器前缀法 4、IE选择器前缀法 1、条件注释法
<!-- [if !IE] -->除了IE都兼容<!-- [endif] -->
<!-- [if IE] ->IE兼容 <!-- [endif] -->
<!-- [if IE6] -->IE6兼容 <!-- [endif] -->
<!-- [if lt IE6] -->IE6以下兼容 <!--[endif]-->
<!--- [if gte IE6] --> IE6及IE6以上兼容 <!--[endif] --> lt:later than
lte: later than and equal
gt: greater than
gte: greater than and equal 2、类内属性前缀法
div{
-webkit-color:#ccc;/*Chrome and Safari*/
-ms-color:#ccc;/* IE */
-moz-color:#ccc;/* firefox*/
-o-color:#ccc;/Opera/
}
3、选择器前缀法
在上面介绍的两种方法基本上能解决80%的兼容性问题,一般不建议优先使用选择器前缀法,因为采用媒体查询的方法(需要CSS3支持)
@media screen and(-webkit-min-device-pixel-ratio:0) {
.class-name{
color:#ccc;/*Chrome and Safari*/
}
}
4、IE选择器前缀法
如果碰到IE8专属的hack使用上面的方法都没办法解决时,就可以使用这种方法了,前提是让IE6-IE8先支持媒体查询
/*IE8*/
@media \0screen{
.class-name {
color:#ccc;
}
} IE6-IE11 全部兼容方法(从高版本写到低版本)
div{
color:#ccc;
color:#ccc\9; /*IE8-IE10*/
color:#ccc\9\0;/*IE9-IE10*/
+color:#ccc;/*IE7*/
_color:#ccc;/*IE6*/
}
@media screen and(-ms-high-contrast:none){
div{
color:#ccc;/*IE10-IE11*/
}
}
@media all and(-ms-hign-contrast:none) {
*::-ms backdrop,div{
color:#ccc;/*IE11*/
}
}
现在用的比较多的就是\9、\0,这是hack IE8、IE9、IE11的专属标识,但是有很多情况下\9、\0对hack IE8、IE9、IE11都不管用。
可能很多人知道\9是用来hack IE9的,\0是用来hack IE8、IE9、IE11的,但是很多情况下都不奏效,
其实IE11仅能识别\0,IE8、IE9能识别\0和\9,那么如何区分IE8和IE9呢? 但是在meta里面定义了meta="IE Edge”的话,IE11仅能识别\0,IE8 IE9能识别\0和\9,关键还是在区分IE8 和IE9,所以代码可以如下:
div{
color:#ccc;
color:#ddd\9;/*IE8 和 IE9*/
color:#eee\0;/*IE11*/
}
/*IE9+*/
@media all and(min-width:0){
div{
color:#f00\9;/*针对IE9,除去Chrome,360等浏览器和IE11*/
}
}
二、IE调试技巧
1、IE6-IE10大部分的div浮动问题都可以通过设置层的width、height和背景色(调试)解决
2、容器内有浮动层元素的,在容器末尾添加清除浮动属性。
3、使用IE-TEST和谷歌调试工具,IE8以下版本使用fire-bug的JS版本,IE8及以上的参考内置的调试工具(和实际效果显示不一样)
4、兼容性版本的和实际效果是有差距的
5、调试版本都从高到低版本进行调试,防止属性版本污染
6、调试过程中,依次从外围向里删除无关的HTML结构和CSS/JS,直到出现问题的赌坊
7、尽量少些hack,用其他方式可以避免则尽量避免 三、IE个版本的bug
1、IE6 margin双倍边距
在IE6中,浮动的div左右边上的margin会有双倍的值,解决方法:在这个div里添加display:inline;
2、IE6 图片下会有空白缝隙
解决方法:改变html的布局,设置img为display:block或者vertical-align:top|bottom|middle都可以解决
3、IE6无法定义1px左右高度的容器
主要是IE6下的默认行高造成的
解决办法:overflow:hidden|zoom:0.08|line-height:1px
关于IE兼容问题的更多相关文章
- 一次修改闭源 Entity Provider 程序集以兼容新 EntityFramework 的过程
读完本文你会知道,如何在没有源码的情况下,直接修改一个 DLL 以去除 DLL 上的强命名限制,并在该程序集上直接添加你的“友元程序集(一种特殊的 Attribute,将它应用在程序集上,使得程序集内 ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- APP多版本共存,服务端如何兼容?
做过APP产品的技术人员都知道,APP应用属于一种C/S架构的,所以在做多版本兼容,升级等处理则比较麻烦,不像web应用那么容易.下面将带大家分析几种常见的情况和应对方式: 小改动或者新加功能的 这种 ...
- ie6 ie7 ie8 ie9兼容问题终极解决方案
放下包袱,解决低版本兼容问题 这是一个老生常谈的问题,自然解决这个问题的方案也比较多,下面整理了一些解决方法: 1.强制使用高版本渲染模式. 强制使用Edge模式来解析网页代码 <meta ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
- DOM getElementsByClassName IE兼容方案
平时写HTML时多用class来命名,为很少用id来命名,主要原因就是class使用起来比较灵活. 但是万恶的JS在操作DOM的时候对ie6+只提供了getElementById和getElement ...
- 记一次使用 android 自带 WebView 做富文本编辑器之API、机型的兼容及各种奇葩bug的解决
转载请声明出处(http://www.cnblogs.com/linguanh/) 目录 1,测试设备介绍 2,开源项目richeditor及CrossWalk的选择 3,遇到的bug及其解决方法 4 ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- 响应式图片菜单式轮播,兼容手机,平板,PC
昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...
随机推荐
- angular : ng-options
基本调用,得到name 属性 <select ng-model="target" ng-options="obj.name as obj.name for obj ...
- java标签(label)求16进制字符串的整数和 把一个整数转为4个16进制字符表示
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #4f76cb } p.p2 { margin: 0.0px 0. ...
- 为效率而生:开源Mac版Google Authenticator认证客户端GoldenPassport
最近运维同学为了提高安全性,用Google Authenticator对服务器加了双重认证,此后登录服务器需要先输入动态密码,在输入服务器密码.Google Authenticator相当于软toke ...
- AR入门系列-03-在unity中将调试好的Vuforia项目导出为APK
先设置build settings 选中Android后点击Player Settings Product Name设置安装后的Android程序的名字 Bundle Identifier 设置apk ...
- 深入理解 JavaScript 异步系列(1)—— 什么是异步
前言 2014年秋季写完了<深入理解javascript原型和闭包系列>,已经帮助过很多人走出了 js 原型.作用域.闭包的困惑,至今仍能经常受到好评的留言. 很早之前我就总结了JS三座大 ...
- asp.net 后台任务作业框架收集
收集几个可以用于 asp.net 的后台任务工具库并简单介绍. hangfire.io 支持 单次任务(Fire-and-forget),延时任务(Delayed),重复任务(Recurring ), ...
- 妙用 `package.json` 快速 `import` 文件(夹)
前言 import router from './router'; import router from '../../router'; import router from './../../../ ...
- 一个想法照进现实-《IT连》创业项目:三天的风投对接活动内幕分享
前言: 话说出来创业的,都有一颗寻找风投的心,只因都有一个共同的特征:缺钱. 有的只是缺几十万,有的缺几百万,有的缺几千万,有的缺几个亿. 中国的市场,只要有需求,就有服务,只要有服务,就多了套路. ...
- 使用js实现ajax的get请求步骤
(以下内容非原创,视频整合得来的) 1.创建XMLHttpRequest对象 2.浏览器与服务器建立连接 3.浏览器向服务器发送请求 4.服务器向浏览器响应请求 下面给出一个实例 1.创建一个test ...
- self-question
需要即刻提升的几大能力: 1.重装系统和安装各种软件 2.自学能力,多从实际案例中总结,多归纳反思 3.拓展人际关系,和别人沟通交流 4.遇到困难迎刃而上,而不是回避退缩