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

Detailed example of database operation object model in Spring jdbc

Use Html+Css to implement a simple navigation bar function (the navigation bar switches the background color when the mouse is encountered)

Ⅰ. Problem description: Use html+css to implement...

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

Detailed example of database operation object model in Spring jdbc

Detailed explanation of Vue form event data binding

The difference between MySQL count(1), count(*), and count(field)

Summary of Seven Basic XHTML Coding Rules

Can't connect to local MySQL through socket '/tmp/mysql.sock' solution

The best explanation of HTTPS

CSS3 flexible box flex to achieve three-column layout

Using System.Drawing.Common in Linux/Docker

Alibaba Cloud Server Ubuntu Configuration Tutorial

HTML pop-up transparent layer instance size can be set and can be proportional

Recommend

Randomly generate an eight-digit discount code and save it to the MySQL database

HTML form submission method case study

Instructions for nested use of MySQL ifnull

Mysql inner join on usage examples (must read)

Detailed explanation of various loop speed tests in JS that you don’t know

CSS code abbreviation div+css layout code abbreviation specification

Detailed explanation of how to use binlog2sql to quickly roll back after MySQL misoperation

Use Html+Css to implement a simple navigation bar function (the navigation bar switches the background color when the mouse is encountered)

Write a React-like framework from scratch

JavaScript implements password box input verification

Ubuntu Basic Tutorial: apt-get Command

Solution to the problem that the Vue page image does not display

MySql quick insert tens of millions of large data examples

The vue project realizes drawing a watermark in a certain area

Detailed tutorial on using VMware WorkStation with Docker for Windows