IE 8とIE 9スタイルの互換性について

2493 ワード

会社はプロジェクトにIE 8とIE 9の互換性を要求するため、本人はchromeテストを使って合格した後、IEプラットフォームの下でテストしなければなりません.本人機にはIE 9しかないので、IE 8の表示問題をテストする場合は、F 12でブラウザの設定表示モードをオンにします.
現在のIEブラウザには、一般的に2つのモードがあります.
ブラウザモードの主な役割は、以前のバージョンのIEと互換性を持つことであり、ブラウザが発行したUserAgentを制御し、どのバージョンのブラウザで要求を発行するかを示し、特定のIEバージョンのために設計されたコードが正しく実行されることを許可する(例えば、ieバージョンを判断するコードもあれば、cssにもieバージョンを判断するコードもある).ドキュメントモードの主な役割は、ブラウザがWebページのHTMLを表示する方法に影響を与え、返されたHTMLファイルを受け取った後、どのIEバージョンのドキュメントモードでこのページを解析するかを決定することである(例えば、JSスクリプトはドキュメントモードに依存し、IE 9のjs変化はIE 9ドキュメントモードでサポートする必要がある).
ドキュメントモードの主な役割は、ブラウザがWebページのHTMLを表示する方法に影響を与え、返されたHTMLファイルを受け取った後、どのIEバージョンのドキュメントモードでこのページを解析するかを決定することである(例えば、JSスクリプトはドキュメントモードに依存し、IE 9のjs変化はIE 9ドキュメントモードでサポートする必要がある).
したがって、ドキュメントモードが機能し、ブラウザモードは外部識別用に使用されます.どういうことか、私がspanの長さを設定したとき、chromeの下で165 pxで位置合わせができます.しかしie 8では167 pxで整列する必要があります.ie 9では、この数字は162 pxです.
長い間分析したが、原因が見つからず、ie hackの方法でしか解決できなかった.よく知られているように、IE 8ではwidth:167 px0、IE 9ではwidth:162 px90が使われている.本人の地元のIEがIE 9であるためか、いずれにしてもこの2つのIDは、IE 8モードまたはIE 9栻で認識できる.
そのため、ブラウザのバージョンを判断することによって、異なるCSSファイルをロードすることによってしか解決できません.

<script type="text/javascript">
var href = '';
if($.browser.msie){
       var version = $.browser.version;
	if(version=="8.0"){
href = "${pageContext.request.contextPath}/businessFlow/md/mdmquery/css/ie8.css";
	}else if(version=="9.0"){
href = "${pageContext.request.contextPath}/businessFlow/md/mdmquery/css/ie9.css";
	}
}
$('<link rel="stylesheet" type="text/css" href="' + href +'"/>').appendTo('head');
</script>

なお、上記の判断ブラウザのコードはJQueryによって作成されるので、このコードはJQueryリファレンスファイルの下に置く.
最近、私も考えていますが、一つのページをロードしてから、デフォルトではIE 8のドキュメントモードを採用する方法はありませんか(私の机では、ページの葉を開いてデフォルトではIE 7のドキュメントモードを使用しています).私がネットで探して、やっと1種の方法を見つけて、実行することができます:

<head>
<title> </title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />

注意すべきは、この順序が重要で、titleとmeta要素の順序を乱すと、この設定モードは機能しません.
以上の方法は最良ではないかもしれませんが、個人的には実用的だと思いますので、後続の参考に記録しておきます.
また,selectとその中のoptionは動的に生成されるため,レイアウトを揃えるためには事前にselectの幅を固定するしかないが,optionの中の内容がselectの幅より長い場合,IEの下には選択ファイルの最初のアルファベットのみが表示されるという問題も生じている.この問題はどうやって解決しますか.
本人の再三のテストを経て、selectの上で1つのchangeイベントをバインドすることができることを発見して、optionを選んでからselectの幅を再設定すれば解決することができて、大体以下の通りです:

$sel.change(function(){
    $(this).width(ieSelectWidth);
});

このコードは簡単ですが、このプロセスは簡単ではありません.

Problem 1689スコア修正

HDOJ(HDU)1407 LTCと同じレベルかどうかをテストします(暴力)