小程序开发

inline-block兼容性测试

posttime:2017-06-21 18:41
首先说下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 对行内元素是支持比较好的。

下面是测试代码及效果

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6. </head>  
  7. <body>  
  8.    <h4>块元素</h4>  
  9.     <div style="display:inline-block; background:#ccc; height:30px; width:30px;">11</div>  
  10.     <div style="display:inline-block; background:#f00;height:30px; width:30px;">11</div>  
  11.     <div style="display:inline-block; background:blue;height:30px; width:30px;">11</div>  
  12.     <div style="display:inline-block; background:red;height:30px; width:30px;">11</div>  
  13.    <h4>行元素</h4>  
  14.     <span style="display:inline-block; background:#ccc; height:30px; width:30px;">11</span>  
  15.     <span style="display:inline-block; background:#f00;height:30px; width:30px;">11</span>  
  16.     <span style="display:inline-block; background:blue;height:30px; width:30px;">11</span>  
  17.     <span style="display:inline-block; background:red;height:30px; width:30px;">11</span>  
  18. </body>  
  19. </html>  
  20.  

 

 

IE 6/7下的显示效果

 

其他浏览器的显示效果


上一篇:webapp在iphone设备横屏时字体变大的解决方法
下一篇:css实现强制不换行/自动换行/强制换行
您的疑惑,我们来解答

8年来我们为上百家企业提供了网站建设服务

感受专业服务,从来电咨询开始
010-6975976518611391767
在线咨询
X