关于inline-block的兼容测试

来源：互联网发布：数据分析经典案例分享编辑：程序博客网时间：2024/06/10 18:23

首先说下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下的显示效果

其他浏览器的显示效果

0 0