关于inline-block的兼容测试

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/budinger/article/details/40261423
首先说下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下的显示效果



其他浏览器的显示效果

展开阅读全文

没有更多推荐了,返回首页