Do ie6 and ie7 really not support inline-block? _html/css

Do ie6 and ie7 really not support inline-block? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:00:03

Original

1014 people have browsed it

I originally came up with a blog post about JavaScript inheritance today. Since I have just learned it recently and I am quite busy at work, I will temporarily recommend writing JavaScript inheritance for two days. If you like it, follow my blog!

OK, let’s get back to the topic. When I came into contact with the front-end, I dealt with the compatibility issues of various browsers. Now I have accumulated a certain amount of experience. I also wrote a blog post on the CSS bug of the IE series. If you like children's shoes, you can click here to view it.

Inline-block is a CSS2.1 attribute, and this is how people often handle inline-block under IE6 and 7

.selector {    display: inline-block;    *display: inline;    *zoom: 1;}

Copy after login

In this way, there will be no problem in dealing with the compatibility of IE6 and 7. Over time, everyone will get used to it. They think that IE6 and 7 do not support the inline-block attribute and need to write a hack to change its display mode. However, this is really the case. ? In fact, inline-block has been supported as early as ie5.5, but the support is not so complete. Please refer to MSDN: http://msdn.microsoft.com/zh-cn/library/ie/ms530751(v=vs.85).aspx. Next, the author will take you to prove whether browsers ie5.5 and above really support inline-block.

First, let’s take a look at the following example:

<!doctype html><html><head>    <meta charset="UTF-8">    <style type="text/css">        html, body, div, span {margin: 0; padding: 0}        .wrapper span {            display: inline-block;            width: 100px;            height: 100px;            border: 1px solid #000;        }    </style></head><body>    <div class="wrapper">        <span></span>        <span></span>        <span></span>        <span></span>        <span></span>    </div></body></html>

Copy after login

As you can see, I set the display: inline-block; attribute for the line element . What was the result? (Due to something wrong with the author's IETester, IE5.5 and IE7 cannot be opened, so I use IETester to open IE6 and use the browser mode of IE10 to switch to IE7)

You can see that the , which is a line element, can magically set the width and height under IE6 and IE7, and it is on the same line (nonsense). It seems that line elements can be set to inline-block in IE6 and 7, but what about block elements?

<!doctype html><html><head>    <meta charset="UTF-8">    <style type="text/css">        html, body, div, span {margin: 0; padding: 0}        .wrapper div {            display: inline-block;            width: 100px;            height: 100px;            border: 1px solid #000;        }    </style></head><body>    <div class="wrapper">        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>    </div></body></html>

Copy after login

You can see that block elements cannot be set inline-block under IE6 and 7, so we can draw the conclusion , IE6 and IE7 actually support inline-block, but the support is not so comprehensive. As for the list elements, you can go ahead and give it a try

. Because we use the following code to make block elements compatible with inline-block under IE6 and 7.

<!doctype html><html><head>    <meta charset="UTF-8">    <style type="text/css">        html, body, div, span {margin: 0; padding: 0}        .wrapper div {            display: inline-block;            *display: inline;            *zoom: 1;            width: 100px;            height: 100px;            border: 1px solid #000;        }    </style></head><body>    <div class="wrapper">        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>    </div></body></html>

Copy after login

This code is also useful for line elements, so no matter what, just display: inline- block; *display: inline; *zoom: 1; There will definitely be no problem. This has also led to the misunderstanding that IE6 and 7 do not support inilne-block. In fact, for line elements, you can directly set display: inline-block; there is no need to set *zoom: 1; Children's shoes will find that after setting inline-block, other browsers will have a few pixel gaps, but there will be no gaps under IE6 and 7. This is because other browsers treat carriage returns or spaces as a space, forming a gap before the element. If there is a gap, you can solve this problem by writing the elements in the same line. Some children will say to use float: left; Since using inline-block, the block element is in the same line, or the width and height of the line element cannot be set. If there is a problem, don’t use float: left

. I remember that the w3c standard also said that display: inline-block should not be used together with float: left.