欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

解决IE不支持display:inline-block

程序员文章站 2022-05-22 14:33:32
...

【前言】

   关于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

 

 

 

 

 

 

 

 

 

 

.

相关标签： 学生提问 CSS 浏览器兼容

上一篇： poi3.9 操作excel 2007

下一篇： 图的储存--邻接表

推荐阅读