CSS hacks \9 and \0 may not work for hacking IE11\IE9\IE8

$CSS hacks \9 and \0 may not work for hacking IE11\IE9\IE8$

Every time I design a web page or a form, I am troubled by the compatibility issues of various browsers, especially the IE family. When designing for compatibility, we often use unique syntax that can be recognized by various browsers to hack, so as to achieve the purpose of normal display in various browsers. Among them, \9 and \0 are the ones we use the most. \9 and \0 are unique identifiers for hacking IE8, IE9, and IE11. But the question is, how do \9 and \0 hack IE8, IE9, and IE11? This problem has been bothering me for a long time. However, today I finally figured it out and created a code writing mode that can hack IE8, IE9, and IE11. This article will share it with you.

Why are \9 and \0 possible hacks invalid for IE11\IE9\IE8?

Many people may understand that \0 is used to hack IE8, IE9, and IE11, while \9 is used to hack IE9. But sometimes when you actually apply it, it doesn't work. Look at the following HTML code:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css example_webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000; /* red */ 
          background-color:#0000FF\0; /* blue*/
          background-color:#FFFF00\9; /* yellow */
    }
    </style>
</head>
<body>
     <div class="content">IE8 IE9 IE11 all display yellow</div>
</body>
</html>

Test address: http://demo.jb51.net/html/ie-hack/ie-hack1.html

In the above example, \9 and \0 cannot achieve the purpose of hacking various IE browser versions. But what will happen if we swap the lines /* blue */ and /* yellow */? Please see the html code:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css example_webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000; /* red */ 
          background-color:#FFFF00\9; /* yellow */
          background-color:#0000FF\0; /* blue*/
    }
    </style>
</head>
<body>
     <div class="content">IE11 displays yellow, IE8 and IE9 both display blue</div>
</body>
</html>

Test address: http://demo.jb51.net/html/ie-hack/ie-hack2.html

The result is that IE11 displays yellow, while IE8 and IE9 both display blue.

The above two examples show that IE8 and IE9 can both read the \9 and \0 identifiers, and whichever of the two identifiers is written later shall prevail, while IE11 can only read the \9 identifier.

At this point, can we write code based on the above conclusions to hack IE8, IE9 and IE11? Obviously not, at least you can't hack IE8 and IE9, you can only hack IE11.

How to hack IE8 and IE9
So, how do we hack IE8 and IE9? This is the crux of the problem.

In this article, CSS distinguishes IE8/IE9/IE10/IE11 Chrome Firefox code, it is mentioned that IE9 and above browsers can understand this code:

/* IE9+ */
@media all and (min-width:0) {
    .divContent{
        background-color:#eee;
    }
}

If we combine this code with the previous code, can we hack IE8 and IE11? The complete HTML code is as follows:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css example_webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000; /* red */ 
          background-color:#FFFF00\9; /* yellow */
          background-color:#0000FF\0; /* blue*/
    }
    /* IE9+ */
    @media all and (min-width:0) {
        .content{
            background-color:#000; /* black */
        }
    }
    </style>
</head>
<body>
     <div class="content">IE11 displays yellow, IE8 displays blue, and IE9 displays black. </div>
</body>
</html>

Test address: http://demo.jb51.net/html/ie-hack/ie-hack3.html

At this point, the compatibility issues of IE8, IE9, and IE11 have been solved.

However, I haven't played with it yet, because @media all and (min-width:0) are also effective in Chrome, Firefox, 360 and other browsers. Therefore, the above code needs to be slightly modified. The CSS statement in @media all and (min-width:0) {} also adds the \0 mark to indicate that this is the style of IE9. The complete modified code is as follows:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css example_webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000; /* red */ 
          background-color:#FFFF00\9; /* yellow */
          background-color:#0000FF\0; /* blue*/
    }
    /* IE9+ */
    @media all and (min-width:0) {
        .content{
            background-color:#000\0; /* black */
        }
    }
    </style>
</head>
<body>
     <div class="content">IE11 displays yellow, IE8 displays blue, and IE9 displays black. </div>
</body>
</html>

Test address: http://demo.jb51.net/html/ie-hack/ie-hack4.html

At this point, the compatibility issues of IE8, IE9, and IE11 have been perfectly solved.

After the meta declaration attribute IE=Edeg, the compatible code for IE8\IE9\IE11 However, if the Meta element IE=Edge is declared in the HTML code of the web page, then the above code is incorrect.

Let’s look at the first HTML code:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css example_webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000; /* red */ 
          background-color:#0000FF\0; /* blue*/
          background-color:#FFFF00\9; /* yellow */
    }
    </style>
</head>
<body>
     <div class="content">IE11 displays blue, IE8 and IE9 both display yellow</div>
</body>
</html>

Test address: http://demo.jb51.net/html/ie-hack/ie-hack5.html

The result is that IE11 displays blue, IE8 and IE9 both display yellow, but not all three browsers display yellow.

This means that after adding the meta IE=Edge statement, IE11 can no longer read the \9 tag.

Let's look at the following code:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css example_webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000; /* red */ 
          background-color:#FFFF00\9; /* yellow */
          background-color:#0000FF\0; /* blue*/
    }
    </style>
</head>
<body>
     <div class="content">IE8 IE9 IE11 all display blue</div>
</body>
</html>

Test address: http://demo.jb51.net/html/ie-hack/ie-hack6.html

The result is that IE8, IE9 and IE11 all display blue, which shows that IE8, IE9 and IE11 can all understand the \0 symbol.

Combining the above two examples, we can conclude that after adding the meta IE=Edge attribute, IE8 and IE9 can read both the \9 and \0 identifiers, while IE11 can only read the \0 identifier.

Therefore, we can hack out IE11 based on this. The following html code explains:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css example_webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000; /* red */ 
          background-color:#0000FF\0; /* The blue one is for IE11*/
          background-color:#FFFF00\9; /* Yellow is for IE8 and IE9*/
    }
    </style>
</head>
<body>
     <div class="content">IE11 displays blue, IE8 and IE9 both display yellow</div>
</body>
</html>

Test address: http://demo.jb51.net/html/ie-hack/ie-hack7.html

In this way, we can use the above code to hack out IE8 and IE9.

How to hack IE8 and IE9? Still the key code of the previous hack IE8 IE9:

@media all and (min-width:0) {}

The complete HTML code is as follows:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css example_webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000; /* red */ 
          background-color:#0000FF\0; /* The blue one is for IE11*/
          background-color:#FFFF00\9; /* Yellow is for IE8 and IE9*/
    }
    /* IE9+ */
    @media all and (min-width:0) {
        .content{
            background-color:#000\9; /* Black is for IE9*/
        }
    }
    </style>
</head>
<body>
     <div class="content">IE11 displays blue, IE8 displays yellow, and IE9 displays black</div>
</body>
</html>

Test address: http://demo.jb51.net/html/ie-hack/ie-hack8.html

Pay special attention to the \9 in @media all and (min-width:0) {} to indicate that it is for IE9. Otherwise, Chrome, Firefox, 360 and other browsers can read it. In this example, IE11 with the IE=Edge attribute declared in meta can also read it.

Conclusion

This article has given a perfect solution to the problem of how to hack IE8 IE9 IE11. There are two points that must be understood: whether the IE=Edge attribute is declared in meta. This makes a huge difference to the way the hack code is written. The usage of \9 and \0 is also very clever.

<<: Detailed explanation of Vue components

>>: Rules for using mysql joint indexes

Div css naming standards css class naming rules (in line with SEO standards)

CSS hacks \9 and \0 may not work for hacking IE11\IE9\IE8

Div css naming standards css class naming rules (in line with SEO standards)

Sample code for displaying a scroll bar after the HTML page is zoomed out

Copy the contents of one file to the end of another file in linux

Play and save WeChat public account recording files (convert amr files to mp3)

How to draw a mind map in a mini program

Detailed explanation of computed properties in Vue

How to set npm to load packages from multiple package sources at the same time

CSS3 achieves flippable hover effect

Implementation of nginx flow control and access control

React+axios implements github search user function (sample code)

Recommend

Example code for CSS to achieve horizontal lines on both sides of the text

Detailed explanation of the working principle of nginx+php execution request

Analyzing the troublesome Aborted warning in MySQL through case studies

Binary installation of mysql 5.7.23 under CentOS7

Future-oriented all-round web design: progressive enhancement

Example code of Vue3 encapsulated magnifying glass component

The problem of mmx64.efi not found occurs when installing Ubuntu18 dual system on win10

Implementation process of row_number in MySQL

Automatically install the Linux system based on cobbler

MySQL multi-table query detailed explanation

Summary of some common writing methods that cause MySQL index failure

MySQL 5.7 deployment and remote access configuration under Linux

MySQL 8.0.22 installation and configuration method graphic tutorial under Windows 10

Docker installation and configuration steps for RabbitMQ

A brief analysis of the problem of Mysql 8.0 version driving getTables to return all database tables