アンティークレベルの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模式

1bb473292c8bb1ef2d576da46da0014873e9d691cf4644b0ada2c4d2d702cf542cacc6d41bbb37262a98f745aa00fbf0dbeaff94c2f1d72b0d673ef6e0c76b56

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

d1a8015a7da731ec92b24deb359d4d83fb82803daaf9050535755cd9cd9eea622cacc6d41bbb37262a98f745aa00fbf0dbeaff94c2f1d72b0d673ef6e0c76b56

文档模式渲染

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

14fc8c82d87bc7887b9c1b71a8fa15fc

 

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

fcf93b0bdbe7d0e0f2ea30b76a516339

 

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

   92cd0d1527117afa84851b28c7cc7321

   736277e92644dc70ea0204b8e6fc13a7

 

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

 e34268e842926ac9839ff256fb1c0f4c

 

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

 dd8975655993e2ad7f1f340fb159d8cd

 

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

 5dbdeaf7142b20ddedcd521d0ee02423

 

7.使用GCF来渲染页面

b5366c11cabb4166d15531fbafd30478

如果安装了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 时。例：

0cb0d37bd827c253db804f192a046bdee388a4556c0f65e1904146cc1a846beep对象中的内容94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68

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 によって生成される

#box{ float:left; margin:0 0 100px; 200px の距離の表示 :inline; // float を無視します}

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

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

左側のオブジェクトはフローティングになります、右側は外側のパッチの左マージンを使用し、右側のオブジェクトのテキストは左から 3 ピクセル離れた位置になります。 width:50%;}#right{width:50%;} *html #left{ margin-right:-3px; //この文が重要です}

HTMLコード4c9e11d1213f3c6519dd492dc1e3bde416b28748ea4df4d9c2150843fecfba68933da5eb64e67ee2599877186ac08c9716b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

標準モードと奇妙なモードのボックスモデル:

標準モード: 要素width = width + padding + border

奇妙なモード: 要素 width = width

line-height は IE6 では場合によっては無効です

テキストが img、input、textarea、select、object およびその他の要素に接続されている場合コンテナの場合、このコンテナに設定されている行の高さの値は同時に無効になります。上記の要素の行の高さは ×2 になる可能性があります。

解決策:

img、input、textarea、select、object、およびテキストに接続されているその他の要素に属性を追加します:

{margin: (belonging line-height-self img, input, select, object height)/2px 0; align:middle;}

その他

1. a タグのコンテンツにスタイルを追加する必要がある場合は、display: block; を設定する必要があります (ナビゲーション タグで一般的)

2。不要なトラブルを避けるために、デフォルトでリストを宣言するのが最善です (ナビゲーションタグとコンテンツリストに共通)

3. div の高さを外部ラッパーとして設定しないでください。オーバーフロー: 非表示を追加するのが最適です。 適応性が高くなります。

4. IE7 以前のブラウザでは、値が増加するにつれてボタンの両側の空白が増加するという問題があります。解決策: input、button{overflow:visible;}

5、ボタンのリセット CSS スタイルは ie6、ie7 と互換性があります。overflow:visible を設定する必要があります

6、IE6 は 1px などの非常に小さな高さを定義できません。デフォルトで行の高さが設定されているため、line-height を追加するだけです: