ホームページ >ウェブフロントエンド >htmlチュートリアル >アンティークレベルの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浏览器。
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");}
相信这个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 */
只需将透明png图片命名为 *-trans.png ,但此方法对背景平铺(background-repeat)和背景(background-position)无法起到任何作用,默认会占满整个容器。
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 によって生成される
DIV フローティング IE テキストは 3 ピクセルのバグを生成します
標準モードと奇妙なモードのボックスモデル:
標準モード: 要素width = width + padding + border
line-height は IE6 では場合によっては無効です
テキストが img、input、textarea、select、object およびその他の要素に接続されている場合コンテナの場合、このコンテナに設定されている行の高さの値は同時に無効になります。上記の要素の行の高さは ×2 になる可能性があります。
{margin: (belonging line-height-self img, input, select, object height)/2px 0; align:middle;}
その他
1. a タグのコンテンツにスタイルを追加する必要がある場合は、display: block; を設定する必要があります (ナビゲーション タグで一般的)
2。不要なトラブルを避けるために、デフォルトでリストを宣言するのが最善です (ナビゲーションタグとコンテンツリストに共通)4. IE7 以前のブラウザでは、値が増加するにつれてボタンの両側の空白が増加するという問題があります。解決策: input、button{overflow:visible;}
5、ボタンのリセット CSS スタイルは ie6、ie7 と互換性があります。overflow:visible を設定する必要があります
6、IE6 は 1px などの非常に小さな高さを定義できません。デフォルトで行の高さが設定されているため、line-height を追加するだけです: