兼容古董级IE小结 - 刘彦佐

IE6已经死亡，当然7，8，9，10也挂掉了。微软对IE11更下了狠手，对其停止了更新。以为前端就可以安安心心地写代码了。可是就是有些顽固分子，竟然用的还是IE6，尊崇客户至上的原则，就恶心着给他兼容老古董。

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

<span style="color: #008080;">1</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">[if IE]>这段文字只在IE浏览器上显示<![endif]</span><span style="color: #008000;">--></span>
<span style="color: #008080;">2</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">[if IE 6]>这段文字只在IE6浏览器上显示<![endif]</span><span style="color: #008000;">--></span>
<span style="color: #008080;">3</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">[if gt IE 6]>这段文字只在IE6以上版本IE浏览器上显示<![endif]</span><span style="color: #008000;">--></span>
<span style="color: #008080;">4</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">[if ! IE 7]>这段文字在非IE7浏览器上显示<![endif]</span><span style="color: #008000;">--></span>
<span style="color: #008080;">5</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">[if !IE]><!</span><span style="color: #008000;">--></span>这段文字只在非IE浏览器上显示!--<span style="color: #0000ff;"><span style="color: #ff00ff;">[endif]--</span><span style="color: #0000ff;">></span></span>

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

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

<span style="color: #0000ff;"><span style="color: #ff00ff;">–[if lt IE 7]</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">=” </span><span style="color: #ff0000;">http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js ”</span><span style="color: #0000ff;">></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"><span style="color: #ff00ff;">[endif]–</span><span style="color: #0000ff;">></span></span></span></span>

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

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

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

文档模式渲染

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

 

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浏览器内核，而且支持IE6、7、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

<span style="color: #800000;">.sector</span>{<span style="color: #ff0000;">max-width</span>:<span style="color: #0000ff;">500px</span>;<span style="color: #ff0000;"> _width</span>:<span style="color: #0000ff;">expression((documentElement.clientWidth>500)?"500px":"auto")</span>;<span style="color: #ff0000;">
min-width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;"> _width</span>:<span style="color: #0000ff;">expression((documentElement.clientWidth;}</span>

万能 float 闭合

相信这个hask大家都不陌生，给需要闭合的div加上 class="clearfix" 即可。

<span style="color: #008080;"> 1</span> <span style="color: #008000;">/*</span><span style="color: #008000;"> Clear Fix </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 2</span> <span style="color: #800000;">.clearfix:after</span>{
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    content</span>:<span style="color: #0000ff;">"."</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">    clear</span>:<span style="color: #0000ff;">both</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">    visibility</span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;"> 8</span> }
<span style="color: #008080;"> 9</span> 
<span style="color: #008080;">10</span> <span style="color: #800000;">.clearfix</span>{
<span style="color: #008080;">11</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">inline-block</span>;
<span style="color: #008080;">12</span> }
<span style="color: #008080;">13</span> 
<span style="color: #008080;">14</span>  
<span style="color: #008080;">15</span> <span style="color: #008000;">/*</span><span style="color: #008000;"> Hide from IE Mac </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">16</span> <span style="color: #800000;">.clearfix </span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">block</span>;}
<span style="color: #008080;">17</span> <span style="color: #008000;">/*</span><span style="color: #008000;"> End hide from IE Mac </span><span style="color: #008000;">*/</span>
<span style="color: #008080;">18</span> <span style="color: #008000;">/*</span><span style="color: #008000;"> end of clearfix </span><span style="color: #008000;">*/</span>

对IE6PNG显示问题

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

marging与padding引起高度不适应

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

p对象中的内容

 

 

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代码

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

标准模式下：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:即可