The reason why li inside-block is invalid in IE11

Recently I was making a list of web page tags, which required no line breaks. I thought it would be easier at first, and I finished writing the code in a few seconds, and passed the test in Firefox and Chrome browsers. However, when I looked at it in IE11, it was unexpected. Did not achieve the expected effect, li inside-block is invalid in IE11! Still changing the line!

#li inside-block still wraps in IE11?

li inside-block still wraps in IE11! Why doesn't it work? Does the code still need to hack IE11? But I saw that the writing method on other people’s websites does not hack IE11.

In fact, the code is quite simple, and it fully achieves the expected results in Chrome and Firefox browsers.

The core css code is as follows:

ul li{
    display:inline-block;
    padding:3px 4px 3px 4px;
    margin:3px 3px 3px 0px;
}

Use display:inline-block to set the li list without line breaks.

The core code of html is as follows:

<ul>
    <li>tag1</li>
    <li>tag2</li>
    <li>tag3</li>
</ul>

The effect should be like this:

Use display:inline-block to set li enumeration No line breaks

Instead of this:

Without display:inline-block li lists line breaks

Find IE11 in the Jingdong web page html code Reasons for invalidity

The above problem bothered me for several days. I once gave up the code method listed in li and adopted the writing method of div, but I was still unwilling to do so because the writing method of li was the right way and the code More concise.

Today I was browsing the mobile phone on Jingdong.com, and the tag list in the side column attracted me. By looking at the html source code of its web page, I found that it was also implemented using li enumeration and display:inline-block.

JD’s tag list

I am determined to find the tag list code that also supports IE11 from this webpage of JD.com.

We can’t wait any longer and take action immediately.

Create a new html file in the locally built debugging environment, copy the html source code of the Jingdong webpage, and then use the "exclusion method" to gradually delete the code until only the DIV listed in this tag is left.

After a period of code deletion work, the remaining code will become less and less, and the answer should become more and more clear.

The hard work paid off, and we finally found the answer! The problem that has been bothering me for many days is finally solved!

It turns out that this sentence needs to be added to the web page

This sentence means that this webpage does not use IE Compatibility View.

IE Compatibility View uses lower versions of IE browsers to render web pages to avoid confusion in web page layout. But now we understand that compatibility view will obliterate certain styles and make certain areas of the web page invisible. The layout does not achieve the expected results. Therefore, when designing a web page, we should tell the IE browser not to use compatibility view to render this web page.

The above is the detailed content of The reason why li inside-block is invalid in IE11. For more information, please follow other related articles on the PHP Chinese website!