display:inline-block的深入理解(转)
转: http://www.planabc.net/2007/03/11/display_inline-block/
在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。
display:inline-block
将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
但对于这个属性不是所有浏览器都识别。
支持的浏览器有:Opera、Safari。
但很遗憾,最流行的 IE 和 Firefox 却不支持这个属性(在 Firefox3 版本中将会支持 display:inline-block)。不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似,为什么是“形似”而不是“神似”呢?这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症,比如使用这一属性后,text-align 有时候就会有问题,还得改用 Firefox 的私有属性 -moz-box-align 来解决(谢谢 aoao 提供案例)。
建议:最好不要使用 Firefox 私有属性 -moz-inline-box。
或许有朋友会对上面所说的 IE 也不支持 display:inline-block 属性,表示疑问或者反对。说:“我在 IE 中对 a 或者 span 等内联元素使用 display:inline-block 一直是有效的”。
其实不然,在IE中对内联元素使用 display:inline-block,IE 是不识别的,但使用 display:inline-block 在 IE 下会触发 layout(如果你对 layout 感觉到陌生,可以参看 old9 翻译的《On having layout》),从而使内联元素拥有了display:inline-block 属性的表症。从上面的这个分析,也不难理解为什么 IE 下,对块元素设置 display:inline-block 属性无法实现 inline-block 的效果。这时块元素仅仅是被 display:inline-block 触发了 layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如 Opera 中块元素呈递为内联对象。
延伸一个问题:IE下块元素如何实现 display:inline-block 的效果?
有两种方法:
1、先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下(…为省略的其他属性内容):
div {display:inline-block;...} div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。代码如下:
div {display:inline; zoom:1;...}
转载于:https://www.cnblogs.com/cssfirefly/archive/2012/07/03/2574732.html
display:inline-block的深入理解(转)相关推荐
- [CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
- display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...
- CSS中display:block、inline、inline-block
display:block的特点: 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.block元素可以设置width,heig ...
- display:inline display:block
display:inline; 元素会被显示为内联元素,元素前后没有换行符. display:block 元素将显示为块级元素,此元素前后会带有换行符. 举例: 1.display:block < ...
- 关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...
- CSS 中 display 的 block,inline,inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...
- display:inline inline-block block
块级元素:默认设置display:block的元素<div>.<h1>~<h6>.<p>.<ul>.<ol>.<li> ...
最新文章
- Hibernate 封装的通用DAO基础类
- activiti 表——介绍
- Java输入输出入门 A+B
- Faster RCNN 训练中的一些问题及解决办法
- 【数据结构与算法】之深入解析“组合总和”的求解思路与算法示例
- python分析nginx日志的ip(中篇一)
- VScode 开发stm32无法识别uint32_t,uint16_t,uint8_t问题
- crontab实现每秒执行
- linux 7 路由命令,CentOS7路由、端口和服务排障常用命令
- 极限压缩----压缩至原视频的五分之一
- 计算机打音乐醉赤壁,抖音确认过眼神我遇上对的人是什么歌,醉赤壁歌曲介绍...
- signature=cc8d613f503e9b933c233da06afc0fc6,襄阳市公安局交通警察支队违法车辆信息公告20210118...
- 洛谷——P2504 [HAOI2006]聪明的猴子
- 算法学习----红黑树
- unity将遮挡人物的模型透明化_笔记
- 服务器必备工具软件推荐
- 1449:【例题2】魔板
- STM32HAL库定时器中断关闭的方法
- 【移动网络】Ch. 2 移动网络基本原理 (Part1. 无线信道与数据率)
- (Java)算法基础6:图/贪心算法(带模板上考场,模板一定滚瓜烂熟解决考场订制)
热门文章
- 让浏览器变身代码编辑器
- 记一个bug定位与修复过程
- SAP 主数据-地点表
- Android Activity为什么要细化出onCreate、onStart、onResume、onPause、onStop、onDesdroy这么多方法让应用去重载?
- android 读取assets文件夹下的文件资源
- WebKit DOM Event (一)
- css盒模型和元素绘制
- 如何将本地jar包放入本地maven仓库和远程私服仓库
- 第五章 循环结构课后反思
- 潜移默化学会WPF(绚丽篇)--热烈欢迎RadioButton,改造成功,改造成ImageButton,新版导航 - AYUI框架 - 博客园...