通常我们想让内联元素为行块布局显示，有2种方法，最常见的是方法是.selector {float:left;......}，第二种方法是.selector {display:inline-block;......}，对于第二种方法，在IE浏览器中得到支持，测试结果会认为IE能识别display:inline-block属性，而最近查阅了资料后，得到结果并非如此......

　　display:inline-block ，简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。这个属性目在主要浏览器的新版本中得到良好的支持，而IE6、7浏览器并不识别display:inline-block属性，之所以IE6、7中内联元素设置了display:inline-block后成行块布局，是因为display:inline-block触发了内联级别的元素的 layout 特性，使内联元素具有inline-block的表症。

　　关于IE haslayout，《前端开发人员需要了解的IE hasLayout》中有详细介绍，本文简单介绍haslayout的2个重要知识点：

  1. IE6、7中内联元素（如span）触发layout属性后， 它的行为和标准中的 inline-block类似
  2. IE6、7中块级元素（如div）触发layout属性，同时设置了 display: inline ，那么它的行为和标准中 inline-block 类似

　　注：在IE8及以上版本做测试时，display:inline-block中的haslayout不起作用，故笔者认为IE8及以上版本已经淘汰display:inline-block属性下触发的haslayout。

针对这2个知识点，做了元素行块布局（inline-block）的测试：

1.对IE6、7中内联元素设置display:inline-block的测试

<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>行内元素的display:inline-block属性</title></head><style type="text/css">.box {    width:20%;    height:50px;    margin:0 0 10px 10px;    border:solid 3px #f00;}.sty-lb {    display:inline-block;}</style><body><span class="box sty-lb">行内元素的display:inline-block属性</span> <span class="box sty-lb">行内元素的display:inline-block属性</span> <span class="box sty-lb">行内元素的display:inline-block属性</span> <span class="box sty-lb">行内元素的display:inline-block属性</span></body></html>

　　

　　在IE6浏览器显示页面正常：

2.对IE6、7中块级元素设置display:inline-block的测试

<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>块级元素的display:inline-block属性</title></head><style type="text/css">.box {    width:20%;    height:50px;    margin:0 0 10px 10px;    border:solid 3px #f00;}.sty-lb {    display:inline-block;}</style><body><div class="box sty-lb">块级元素的display:inline-block属性</div><div class="box sty-lb">块级元素的display:inline-block属性</div><div class="box sty-lb">块级元素的display:inline-block属性</div><div class="box sty-lb">块级元素的display:inline-block属性</div></body></html>

　　

　　在IE6浏览器显示页面并不是我们想要：

3.对IE6、7中块级元素触发layout，并设置display:inline的测试

<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>块级元素的display:inline-block属性</title></head><style type="text/css">.box {    width:20%;    height:50px;    margin:0 0 10px 10px;    border:solid 3px #f00;}.sty-lb {    zoom:1;/* 触发元素的haslayout属性 */    display:inline-block;/* 非IE6、7浏览器识别该属性，使得页面也成行块布局 */    *display:inline;/* 针对IE6、7定义 display:inline，让块元素呈递为内联对象，并具有display:inline-block属性的表症 */}</style><body><div class="box sty-lb">块级元素的display:inline-block属性</div><div class="box sty-lb">块级元素的display:inline-block属性</div><div class="box sty-lb">块级元素的display:inline-block属性</div><div class="box sty-lb">块级元素的display:inline-block属性</div></body></html>

　　在IE6浏览器显示正常：

　　总结：IE6、7中内联元素触发layout属性后， 拥有了display:inline-block属性的表症，而块级元素触发layout属性并设置了 display: inline ，那么它也拥有了display:inline-block属性的表症。

转载于:https://www.cnblogs.com/PeunZhang/archive/2012/02/07/2341985.html

【原】display:inline-block下的IE元素相关推荐

  1. [CSS]详解display:inline | block |inline-block的区别

    2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...

  2. display:inline、block、inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  3. display的block、none、inline属性及解释

    常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...

  4. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  5. display:inline、block、inline-block的区别以及该死的ie6兼容问题

    2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  6. CSS中display：block、inline、inline-block

    display:block的特点: 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.block元素可以设置width,heig ...

  7. 关于css的display:flex inline block inline-block和float

    1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...

  8. CSS 中 display 的 block，inline，inline-block 这三个属性的区别

    基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...

  9. display:inline inline-block block

    块级元素:默认设置display:block的元素<div>.<h1>~<h6>.<p>.<ul>.<ol>.<li> ...

最新文章

  1. 深度学习概述：当你没有方向时的加油站
  2. sendmail邮件服务器配置
  3. 简单阻容降压电路图_X2安规电容用于阻容降压容量衰减原因及对策
  4. cortex m0启动代码详解
  5. Ubuntu 时间同步
  6. IOS – OPenGL ES 调节图像饱和度 GPUImageSaturationFilter
  7. C语言open()函数：打开文件函数（转）
  8. 如何优雅地将Markdon格式文件md转为pdf？（使用typora）
  9. 【李宏毅2020 ML/DL】P76 Generative Adversarial Network | Unsupervised Conditional Generation
  10. 浏览器，图片格式及特点
  11. 【存储测试】vdbench存储性能测试工具
  12. jQuery 倒计时插件
  13. 泰坦尼克号沉没之谜，用数据还原真相——Titanic获救率分析（用pyecharts）
  14. 全新体验的飞冰 2.0 正式发布
  15. [语音识别] 单音素、三音素、决策树
  16. 股票价格在随机漫步吗？用 Python 来告诉你
  17. 华为又一重磅APP永久下线。网友：太难了……
  18. 【计算机网络学习笔记】（汇总目录）
  19. 一般java面试考什么_JAVA面试的时候一般考什么?
  20. CS5268/CS5265/CS5266 Type-C转HDMI设计方案|替代CS5268/CS5265/CS5266芯片|GSV2201可完全替代兼容CS5268/CS5265/CS5266

热门文章

  1. EOS下控制台以及图形界面打印sql语句
  2. keepalived之 Keepalived 原理（定义、VRRP 协议、VRRP 工作机制）
  3. linux文件上传，给文件或目录添加apache权限
  4. kafka的简单使用
  5. 对象不支持“handleError”属性或方法 ajaxfileupload.js
  6. Jquery ajax jsonp跨域访问 返回格式及其获取方式 并实现单点登录SSO
  7. windows x64 build c++ poco库
  8. Javascript获取select的选中值和选中文本
  9. heartbeat原理介绍
  10. [性能优化]UITableView性能优化的一点感悟及计算UILabel高度的新方法