关于inline-block的兼容测试

最新推荐文章于 2019-08-09 18:11:16 发布

budinger

最新推荐文章于 2019-08-09 18:11:16 发布

阅读量1.4k

点赞数 1

分类专栏：前端开发&HTML5

本文链接：https://blog.csdn.net/budinger/article/details/40261423

版权

前端开发&HTML5 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

首先说下inline、block、inline-block的区别
inline：行内元素显示前后无换行符
block：块级元素
inline-block：行内块元素
重点说下inline-block这个属性。经过测试当display：inline-block的时候，本身为块元素的HTML标签（比如 div等）应用此样式在IE8+、chrome、firefox 会将块元素转换成行内元素，但是依然有块元素的特征。可以设置宽高等块元素的属性。有点类似float的时候。但是在IE6\7下，块元素应用inline-block，可以设置宽高，但是不会几个块级元素都呈现在一行上。

本身为内联元素的HTML标签（比如 span 、a等），应用display：inline-block 可以呈现块元素的特征可以设置宽高。在所有浏览器下，display：inline-block 对行内元素是支持比较好的。

下面是测试代码及效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
   <h4>块元素</h4>
	<div style="display:inline-block; background:#ccc; height:30px; width:30px;">11</div>
	<div style="display:inline-block; background:#f00;height:30px; width:30px;">11</div>
	<div style="display:inline-block; background:blue;height:30px; width:30px;">11</div>
	<div style="display:inline-block; background:red;height:30px; width:30px;">11</div>
   <h4>行元素</h4>
	<span style="display:inline-block; background:#ccc; height:30px; width:30px;">11</span>
	<span style="display:inline-block; background:#f00;height:30px; width:30px;">11</span>
	<span style="display:inline-block; background:blue;height:30px; width:30px;">11</span>
	<span style="display:inline-block; background:red;height:30px; width:30px;">11</span>
</body>
</html>

IE 6/7下的显示效果

其他浏览器的显示效果

budinger

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
关于inline-block的兼容测试

首先说下inline、block、inline-block的区别inline：行内元素显示前后无换行符block：块级元素inline-block：行内块元素重点说下inline-block这个属性。经过测试当display：inline-block的时候，本身为块元素的HTML标签（比如 div等）应用此样式在IE8+、chrome、firefox 会将块元素转换成行内元素，但
复制链接

扫一扫

专栏目录