浏览器兼容性杂谈

原文地址: 小昱博客 - 浏览器兼容性杂谈 转载请注明出处


html5shiv.js让IE6-8浏览器支持HTML5新标签

参考文章

GitHub官方地址

使用方法

<!--[if IE]>
  <script src="html5shiv.js"></script>
<![endif]-->

Respond.js让IE6-8浏览器支持媒体查询

参考文章

Respond.js让IE6-8支持CSS3 Media Query

GitHub官方地址

使用方法

1.在css中正常用 min/max-width media queries

@media screen and (min-width: 480px){
  ...styles for 480px and up go here
}

2.引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果respond.js加载得很后面,这时重新根据media query解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象)

<!--[if IE]>
  <script src="respond.js"></script>
<![endif]-->

实现思路

1.把head中所有<link rel=“sheetstyle” href=“xx”/>的css路径取出来放入数组

2.然后遍历数组一个个发ajax请求

3.ajax回调后仅分析response中的media query的min-width和max-width语法,分析出viewport变化区间对应相应的css块

4.页面初始化时和window.resize时,根据当前viewport使用相应的css块。

总结

优点:压缩后仅1k,不跨域时性能ok,只需引入respond.js通用易用

缺点:仅支持media query的min-width和max-width(用于响应式够用);支持跨域,虽然配置有点麻烦,实现跨域代价高而且有闪屏体验欠佳。

IE6~IE8中使用css3的选择器

参考文档

使用Selectivizr让IE6~8支持CSS3

官方网站

使用方法

Selectivizr的使用非常的简单,但是并不能直接使用,在使用前需要先加载下列框架中的任何一个:JQuery、dojo、prototype、Yahoo YUI、DOMAssistant、mootools、NVMatcher。需要注意的是Selectivizr对各个框架的支持程度不一,具体可查看官方网站。 然后在页面里引用Selectivizr即可。

<script type="text/javascript" src="[JS library]"></script>
<!--[if lt IE 9]>
    <script type="text/javascript" src="selectivizr-min.js"></script>
< ![endif]-->

注意事项

  1. Selectivizr会自动检测最好的JS框架,如果你当前页面中正在使用如JQuery框架,但是它对Selectivizr的支持并不太好,你只需要在页面中再调用另一个(如Mootools)即可。
  2. CSS样式必须使用<link>标签引入,还可以使用@import,但不能在页面里使用<style>来定义。
  3. Selectivizr必须运行在标准模式,所以你要确保你有一个DTD在你的页面顶部。
  4. 如果客户浏览器不支持JS,你只需要使用<noscript></noscript>就可以给它们单独写hack。
  5. 不支持站外样式调用。

让多核浏览器使用 webkit 内核渲染

参考文档

指定360安全浏览器使用 webkit 内核渲染

概述

目前国内不少浏览器都自称双核,一般是 IE(Trident)+Webkit。因为 webkit 急速的体验和对 HTML5 的支持,有些情况下(我们)开发者可能希望用户优先甚至只使用 webkit 内核渲染,比如通过 Meta 标签来指定。然而目前还没有任何一个公认的标准来实现。大多数用户根本分不清浏览器双核之间的区别(大概认为跟双核安卓手机的“双核”差不多吧)。把决定权交给开发者,以此给用户带来更好的浏览体验,不失为一件好事。

<meta name="renderer" content="webkit | ie-comp | ie-stand">

若页面需默认用极速核,增加标签:

<meta name="renderer" content="webkit">

使用当前电脑当中最高的ie版本进行渲染

参考文章

使用X-UA-Compatible来设置IE浏览器兼容模式

使用方法

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

使用说明

IE8支持几种文件兼容性模式,它们具有不同的特性并影响内容显示的方式。

•Emulate IE8 mode
•Emulate IE7 mode
•IE5 mode
•IE7 mode
•IE8 mode
•Edge mode

低版本ie兼容问题的解决方案

参考文章

低版本ie兼容问题的解决方案

1、CSS hack
2、IE6双边距

​ 当元素浮动后,再设置同方向margin,会产生双边距

​ 解决:增加

*display:inline;
3、IE6最小高度问题

​ IE6下最小高度19px,想小于此高度,增加

*overflow:hidden;

4、li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题

​ 针对li添加

*vertical-align: top;
5、浮动元素之间注释,导致多复制一个文字问题

​ 两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px时,

​ 1)两个浮动元素中间避免出现内联元素或者注释
​ 2)与父级宽度相差3px或以上

6、IE6 7 父级元素的overflow:hidden 是包不住子级的relative

​ 针对ie6、7给父级元素添加相对定位

overflow: hidden;
*position: relative;
7、IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差

​ 避免父级宽高出现奇数

8、IE6下绝对定位元素和浮动元素并列绝对定位元素消失

​ 浮动元素和绝对定位元素是同级的话定位元素就会消失

​ 解决:不处于同级

9、IE6 下input的空隙

​ 给input元素添加float

10、display:inline-block

​ IE6下使用

*display:inline;
*zoom:1;
11、margin兼容性问题

​ 1)margin-top传递
​ 触发BFC、haslayout,父元素增加

overflow: hidden;
zoom:1;

​ 2)上下margin叠压

​ 尽量使用同一方向的margin,比如都设置top或者bottom

12、p 包含块元素嵌套规则

不要嵌套

13、IE6下子元素超出父级宽高,会把父级的宽高撑开

不要让子元素的宽高超过父级

14、第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题; 

1)不建议这么写
    2)用浮动解决

15、元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动

浮动元素中存在块元素,给块元素增加float

16、IE6不支持png24 图片

1)JS插件(问题:不能处理body之上png24)

下载地址:http://www.dillerdesign.com/experiment/DD_belatedPNG/#download

<meta charset="utf-8">
<title></title>
 
 
<style>
    body{
        background-color: red;
    }
    div{
        width: 300px;
        height: 300px;
        background: url("img/png.png") no-repeat;
    }
</style>
 
 
<div></div>
![](img/png.png)

2)原生滤镜

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/DD_belatedPNG_0.0.8a.js"></script>
        <script>
            DD_belatedPNG.fix("body");
        </script>
        <style>
            body{
                width: 500px;
                height: 500px;
                background:red url("img/png.png") no-repeat;
                _background-image:none;
                _filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png.png", sizingMethod="crop");
            }
        </style>
    </head>
    <body>
    </body>
</html>
17.img下面出现一条缝
img{
  display: block;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,219评论 0 8
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,138评论 0 1
  • 习惯了看别人的幸福,是失落还是会期待 是不是因为单身太久,所以在路上看见情侣吵架,都觉得他们是在秀恩爱。一个人,除...
    林爱晨阅读 2,608评论 2 6
  • 1.满足每天1w步,不足回家跑步机10min,哑铃100下,倒立平板交替,共4min… 2.不再喝碳酸饮料,主食减...
    pangbaitu阅读 234评论 0 0