Solve that IE does not support display:inline-block

【Foreword】

Regarding the issue that IE does not support display:inline-block, this is a browser compatibility issue. With the accumulation of the projects and the in-depth learning, they will start to come into contact with compatible issues.

Most projects now do not require compatibility. Generally, as long as it is compatible with IE8

【Case】

For this question, let me give an example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title> demo measurement </ title>
	<style type="text/css">
		*{margin: 0;padding: 0}
		.parent{
			width: 400px;
			height: 200px;
			border: 1px solid red;
			margin: auto;
		}
		.parent div{
			background-color: red;
			display: inline-block;
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
<div class="parent">
	<div></div>
	<div></div>
	<div></div>
</div>
</body>
</html>

After the test, it will be found that the parsing is abnormal under the IE browser. So let's analyze the reasons

【Details】

(1) What exactly is inline-block?

An element with inline-block set creates an inline-level block container, the content of the element is formatted as a block-level element, and the element itself is formatted as an inline element. The straightforward point is that the inline-block element has the feature that the block element can set the height and width, and at the same time has the feature that the inline element does not wrap by default.

The common separation is for the inline element and the block element: after the inline element has set this attribute, it can keep the default feature of not wrapping, but its internal performance is a block element, which can set the height and width, etc. After the block element is set with this property, it behaves as an inline element with the feature of not wrapping, but in essence, the height and width can be set by the feature of block.

（2）IE的inline-block

Many people say that ie6/7 does not support the inline-block feature, but found evidence in the msdn Microsoft open community, ie has supported inline-block since 5.5, but the appearance is deviated.

【plan】

From the difference, it can be seen that IE and other browsers have different expressions. Even if inline-block triggers haslayout, it still does not have the feature of inline-block and no line break. However, if you want block to support the feature of inline-block element, we You can add to it:

display: inline;  
zoom:1;

Set display: inline to make the block element become an inline element, and then set zoom: 1 to make it have a layout, you can set characteristics such as height and width.

【Summarize】

In summary: display: inline and zoom: 1 in ie are equivalent to display: inline-block

Solve that IE does not support display:inline-block

Guess you like