IE8以下のブラウザがCSS3メディアクエリをサポートしていない問題の解決方法_html/css_WEB-ITnose

問題: IE8 以下の IE ブラウザがウィンドウを縮小すると、対応する要件に従ってウィンドウが縮小された場合、UI は対応するレイアウトを表示しません。

配置プロセス:

実際、最初に質問を受けたとき、メディア CSS 属性についてはもちろん、その機能についても聞いたこともありませんでした。しかし、UIの問題を解決するために、私は自分なりの考え方を持っています。それは、まずなぜエラーが発生するのか、なぜエラーが発生しないのかを考え、その2つの側面に基づいてhtmlまたはjsまたはcssファイルを簡素化し、簡略化することです。修正を繰り返し、UI の変更を確認して問題の範囲を絞り込み、最終的に問題の根本原因を特定します。

では、なぜ他のブラウザのインターフェースレイアウトには問題がないのでしょうか?そこで、CSS ファイルのコードを部分的に削除して、IE8 以外のブラウザでもページレイアウトを表示するという作業を繰り返した結果、IE8 以外のブラウザでも上記の問題が発生することがわかりました。ははは、目的は達成しました。根本的な原因はここにあります。その後、この部分を正確に配置したところ、@media 画面と (最大幅: 900px) であることがわかりました。これは、Baidu に直接アクセスしたことがありません。それが何をするのかを知るために、私は以前にその理由を知っていました。

問題の根本:

メディアは、ウィンドウのサイズに応じてレイアウトを自動的に調整するためにプロジェクトの CSS ファイルで使用されます。ただし、IE8 以下のブラウザは CSS3 メディア クエリをサポートしていません。は、@media screen and (max-width: 900px) 内の CSS コードが実行されません。

@media screen and (max-width: 900px) { ... }

どうすればよいですか?インターネットでは解決策が提案されています。最も簡単な方法は次のとおりです。

IE8 およびそれ以前のブラウザは CSS3 メディア クエリをサポートしていません。この問題を解決するには、ページに css3-mediaqueries.js を追加します。

そうですか

以上、非常に単純ですが、結果は非常に残念でした。試したことのある同僚にアドバイスをいただければ幸いです。別の少し複雑な方法を使用するしかありません。これもインターネットで調べました。1 つ目は、この処理が実行できるのは IE8 以下の 2 つです。ブラウザが特定のサイズ範囲に縮小された後。方法は次のとおりです:

原則: jquery を使用します。理解できない場合は、必要に応じて HTML 内の対応する CSS ファイルを変更します。

解決策:

以下を追加します。すべてのページの共有 js ファイルの後のコード :

<!--[if lt IE 9]>    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

media_screen.js ファイルの内容は、インターネットから直接コピーされた次のとおりです:

/*Adjust the layout in IE8 and lower than IE8 when the browser is narrow*/function processLowerIENavigate(){   var isIE = document.all ? 1 : 0;   if (isIE == 1)   {       if(navigator.userAgent.indexOf("MSIE7.0") > 0 || navigator.userAgent.indexOf("MSIE 8.0") > 0)       {      //  var doc=document;            var link=document.createElement("link");           link.setAttribute("rel", "stylesheet");           link.setAttribute("type", "text/css");           link.setAttribute("id", "size-stylesheet");           link.setAttribute("href", "");             var heads = document.getElementsByTagName("head");           if(heads.length)               heads[0].appendChild(link);           else               document.documentElement.appendChild(link);           document.write("<script type='text/javascript' src='jquery.min.js'></script>");           document.write("<script type='text/javascript' src='media_screen.js'></script>");         }   } }var lowerIE8 = processLowerIENavigate();

ファイルは、IE8 およびその他の下位バージョンのページ レイアウトです。ブラウザが縮小されたとき。 OK、すべてが完了しました。