兼容古董级IE小结

时间 2020-06-17

标签兼容古董小结繁體版

原文原文链接

IE6已经死亡，固然7，8，9，10也挂掉了。微软对IE11更下了狠手，对其中止了更新。觉得前端就能够安安心心地写代码了。但是就是有些顽固分子，居然用的仍是IE6，尊崇客户至上的原则，就恶心着给他兼容老古董。css

IE条件注释，微软官方推荐的hack方式html

1 <!--[if IE]>这段文字只在IE浏览器上显示<![endif]-->
2 <!--[if IE 6]>这段文字只在IE6浏览器上显示<![endif]-->
3 <!--[if gt IE 6]>这段文字只在IE6以上版本IE浏览器上显示<![endif]-->
4 <!--[if ! IE 7]>这段文字在非IE7浏览器上显示<![endif]-->
5 <!--[if !IE]><!-->这段文字只在非IE浏览器上显示!--<![endif]-->

google的ie7 – js，它是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS二、CSS3选择器。它修复了许多的HTML和CSS问题，并使得透明PNG在IE五、IE6下正确显示。前端

使IE5,IE6兼容到IE7模式（推荐）chrome

<!–[if lt IE 7]><script src=” http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js ”></script><![endif]–>

如下两个是不推荐的，我在浏览器出现了问题express

1.使IE5,IE6,IE7兼容到IE8模式浏览器

<!–[if lt IE 8]><script src=” http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js ”></script><![endif]–>app

2.使IE5,IE6,IE7,IE8兼容到IE9模式框架

<!–[if lt IE 9]><script src=” http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js ”></script><![endif]–>ide

文档模式渲染

1.强制使用IE5模式来解析svn

2.强制使用IE6模式来解析

3.强制使用IE7模式来解析的两种方式

4.强制使用IE8模式来解析

5. Google Chrome Frame也可让IE用上Chrome的引擎:

6.若是一个特定版本的IE支持所要求的兼容性模式多于一种，以下代码就是IE5和IE8两种模式：

7.使用GCF来渲染页面

若是安装了GCF（Google Chrome Frame 谷歌内嵌浏览器框架，则使用GCF来渲染页面，若是没安装GCF，则使用最高版本的IE内核进行渲染。这个插件可让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，并且支持IE六、七、8等多个版本的IE浏览器。

兼容技巧

让IE6支持max-width,min-width

IE没有min-这个定义，实际上它把正常的width和height看成有min的状况来处理。若是只用宽度和高度，正常的浏览器里这两个值就不会变，若是只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
好比要设置背景图片，它宽度是很重要的:
#box{ width: 80px; height: 35px;}

html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

在早期IE中，能够在css中写下相似js代码来兼容IE6

.sector{max-width:500px; _width:expression((documentElement.clientWidth>500)?"500px":"auto");
min-width:300px; _width:expression((documentElement.clientWidth<300)?"300px":"auto");}

万能 float 闭合

相信这个hask你们都不陌生，给须要闭合的div加上 class="clearfix" 便可。

 1 /* Clear Fix */
 2 .clearfix:after{
 3     content:".";
 4     display:block;
 5     height:0;
 6     clear:both;
 7     visibility:hidden;
 8 }
 9 
10 .clearfix{
11     display:inline-block;
12 }
13 
14  
15 /* Hide from IE Mac */
16 .clearfix {display:block;}
17 /* End hide from IE Mac */
18 /* end of clearfix */

对IE6PNG显示问题

只需将透明png图片命名为 *-trans.png ，但此方法对背景平铺(background-repeat)和背景(background-position)没法起到任何做用,默认会占满整个容器。

marging与padding引发高度不适应

FF下给 div 设置 padding 后会致使 width 和 height 增长, 但IE不会.(可用!important解决，随着IE7对!important的支持，!important 方法如今只针对IE6的HACK。)。高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。例：

<div id="box"><p>p对象中的内容</p> </div>

CSS：#box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

居中问题.

1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再经过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(固然不是万能)

浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种状况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特色是:老是在新行上开始,高度,宽度,行高,边距均可以控制(块元素);Inline元素的特色是:和其余元素在同一行上,不可控制(内嵌元素);

DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id="box"> <div id="left"></div> <div id="right"></div></div>

标准模式和怪异模式盒模型：

标准模式下：Element width = width + padding + border

怪异模式下：Element width = width

IE6下某些状况line-height无效

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；同时以上元素的行高可能×2。

解决办法：
对和文字相链接的img、input、textarea、select、object等元素加以属性：
{margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;}

其它

1, 若需给 a 标签内内容加上样式, 须要设置 display: block;(常见于导航标签)
2, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以免没必要要的麻烦. (常见于导航标签和内容列表)
3, 做为外部 wrapper 的div不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.

4,按钮在IE7及更早浏览器下随着value增多两边留白也随着增长的问题。解决办法：input,button{overflow:visible;}

5,button重置css样式兼容ie6,ie7，须要设置overflow:visible

6,IE6下没法定义很小的高度：如1px.。由于u默认会有行高，添加line-height:便可