解决IE不支持display:inline-block

【前言】

关于IE不支持display:inline-block的问题，这是浏览器兼容的问题。随着所做项目的积累和学习深入后，都会开始接触兼容的问题。

现在大多项目，都不太要求兼容。一般都只要兼容到IE8即可

【案例】

对于这个问题，我先举个例子

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo测试</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>

测试后会发现，在IE浏览器下解析异常。那么我们来分析一下原因

【详解】

（1）到底什么是inline-block？

设置了inline-block的元素创建了一个行级的块容器，该元素内部即内容被格式化为一个块级元素，同时元素本身被格式化为一个行内元素。直白点就是inline-block的元素既有block元素可以设置高度宽度的特性，同时又具有inline元素默认不换行的特性。

通俗的分开对inline元素和block元素来说就是：inline元素设置了该属性以后，任保持默认的不换行的特性，但其内部表现得就是一个block元素，可以设置高度宽度等。而block元素设置了该属性以后，表现得就是一个行内元素，持有不换行的特性，但实质上任由block的特性，可以设置高度宽度。

（2）IE的inline-block

很多人都说ie6/7不支持inline-block特性，但是在msdn微软开放社区里找到证据，ie从5.5开始就已经对inline-block支持了，只是表象形式上有所偏差。

【方案】

从差异上可以看出ie和其他浏览器的表现形式上不一样，即使是inline-block触发了haslayout还是不具有inline-block不换行的特性，不过想要block支持inline-block元素的特性，我们可以在其基础上添加：

display: inline;  
zoom:1;

设置display：inline，使block元素变为inline元素，然后设置zoom：1，使其具有布局，就可以设置高度宽度等特性。

【总结】

总结来说就是：ie中的display：inline和zoom：1相当于display：inline-block

解决IE不支持display:inline-block

猜你喜欢