IE6,7中的inline-block

最新推荐文章于 2018-09-28 10:18:27 发布

fedawn

最新推荐文章于 2018-09-28 10:18:27 发布

阅读量515

点赞数

分类专栏：代码 css 文章标签： ie class 测试

本文链接：https://blog.csdn.net/fedawn/article/details/7324541

版权

代码同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

简单的测试了一下，在IE6，7中，

1、如果元素是block，设置display为inline-block时，不生效；

2、如果元素是inline，设置display为inline-block时，生效；

3、兼容IE6，7的方法是*display:inline; *zoom:1；

4、inline元素在代码排版中要一行显示，不然相互之间会有小空格。

inline-block

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display:inline-block</title>
<style type="text/css">
	div{ background:#EEE; margin:20px 0;}
	.div-inline-block{ display:inline-block; width:100px; height:100px; background:#090; margin:5px; color:#fff; word-wrap:break-word;}
	.span-inline-block{ display:inline-block; width:100px; height:100px; background:#090; margin:5px; color:#fff; word-wrap:break-word;}
	.compatible-inline-block{display:inline-block; width:100px; height:100px; background:#090; margin:5px; color:#fff; *display:inline; *zoom:1; word-wrap:break-word;}
</style>
</head>

<body>
	div.inline-block
	<div>
		<div class="div-inline-block">div.inline-block</div><div class="div-inline-block">div.inline-block</div><div class="div-inline-block">div.inline-block</div>
	</div>
	span.inline-block
	<div>
		<span class="span-inline-block">span-inline-block</span><span class="span-inline-block">span-inline-block</span><span class="span-inline-block">span-inline-block</span>
	</div>
	div.compatible-inline-bloc
	<div>
		<div class="compatible-inline-block">div.inline-block</div><div class="compatible-inline-block">div.inline-block</div><div class="compatible-inline-block">div.inline-block</div>
	</div>
</body>
</html>

fedawn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE6,7中的inline-block

简单的测试了一下，在IE6，7中，1、如果元素是block，设置display为inline-block时，不生效；2、如果元素是inline，设置display为inline-block时，生效；3、兼容IE6，7的方法是*display:inline; *zoom:1；4、inline元素在代码排版中要一行显示，不然相互之间会有小空格。display:inl
复制链接

扫一扫