アンティークレベルのIEに対応 summary_html/css_WEB-ITnose

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

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

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标准，支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题，并使 得透明PNG在IE5、IE6下正确显示。

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

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

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

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

.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 时。例：

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

解決策: P オブジェクトの上と下に追加します。 2 空の div オブジェクト CSS コード: .1{height:0px;overflow:hidden;} または DIV に border 属性を追加します。

センタリングの問題。

1) line-height を現在の div と同じ高さに設定し、vertical-align: middle を渡します (コンテンツを折り返さないように注意してください)。 margin: 0 auto; (もちろん全能ではありません)
float IE によって生成される

2 つの要素 block と inline について詳しく説明します。 Block 要素の特徴は、常に新しい行で始まり、高さ、幅、行の高さです。マージンはすべて制御可能 (ブロック要素); インライン要素の特徴は次のとおりです: 他の要素と同じ行では制御できません (インライン要素)

DIV フローティング IE テキストは 3 ピクセルのバグを生成します

HTMLコード