IIE8 does not support media queries. iie8 does not support media queries.

IIE8 does not support media queries. iie8 does not support media queries.

Recently, I encountered the following browser incompatibility problems when solving the UI problem (I am a amateur UI operator and I am very amateur in many ideas ):

Problem:When IE 8 and earlier versions are used to narrow down the window, the UI does not display the corresponding layout when the window is scaled down as required. other browsers are normal.

Positioning process:

In fact, it was impossible to get started with the problem. I don't know why. I didn't even hear about the CSS nature of media, so I didn't even know its functions. However, you have a set of ideas for solving the UI problem, that is, you must first consider the two aspects: Why is the error and why is there no error, then, the html, js, or css files are simplified, modified, and modified to view the UI changes. In this way, the problem scope is reduced and the root cause is found.

So I wonder why there is no problem with the layout of other browsers? As a result, the CSS file code is constantly cut down and the page layout is viewed through browsers other than IE8. the above problem also occurs in browsers other than IE8. Haha, the goal is achieved, the root cause is here, and then precisely locates this part. It turns out that it is @ media screen and (max-width: 900px )... something is at work. I have never seen it, Baidu, or W3C. I can understand what it is and why it is.

Root cause:

Media is used in the CSS file of the project to automatically adjust the layout according to the window size. However, IE8 and earlier Browsers Do not support CSS3 media queries, that is, the css code in @ media screen and (max-width: 900px) is not executed,

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

How can this be done? On the Internet, many people have proposed solutions. The simplest method is:

IE8 and earlier Browsers Do not support CSS3 media queries, and you can add css3-mediaqueries.js to the page to solve this problem.

 

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

It turned out to be quite simple, and the results were quite disappointing. How can I try it in the project? I also hope I have tried a practical cool dial, there is no way to use another method that is a little more complicated. It is also learned from the Internet. Here we have to consider two issues. One is that only IE8 and its earlier versions can handle this problem, second, this processing is performed only when the browser is reduced to a specific size range. The method is as follows:

Principle: jquery is used. If you don't understand it, you can just use it. Then, you can change the corresponding CSS file in html as needed.

Solution:

Add the following code after the shared js file on the page:

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_x_x_x ("link ");
Link. setAttribute ("rel", "stylesheet ");
Link. setAttribute ("type", "text/css ");
Link. setAttribute ("id", "size-stylesheet ");
Link. setAttribute ("href ","");

Var heads = document. getElementsByTagName_r ("head ");
If (heads. length)
Heads [0]. a (link );
Else
Document.doc umentElement. a (link );

Document. write ("
Document. write ("

}
}
}
Var lowerIE8 = processLowerIENavigate ();

The content of the media_screen.js file is as follows, which can be copied directly from the Internet:
Function adjustStyle (width ){
Width = parseInt (width );
If (width <902 ){
// Alert ("<900 ");
// Alert (width );
$ ("# Size-stylesheet"). attr ("href", "navigateLowerIE8.css ");
} Else {
// Alert ("> 900 ");
// Alert (width );
$ ("# Size-stylesheet"). attr ("href ","");
}
}

$ (Function (){
AdjustStyle ($ (this). width ());
$ (Window). resize (function (){
AdjustStyle ($ (this). width ());
});
});
The navigateLowerIE8.css file is the page layout of IE8's earlier browsers. OK. Everything is done.