CSS表现属性Display:Inline-Block的深入理解

css

在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,无论是初接触Web标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。

display:inline-block

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

但对于这个属性不是所有浏览器都识别。

支持的浏览器有:Opera、Safari

但很遗憾,最流行的IE和Firefox却不支持这个属性(据说下一版本的Firefox将会支持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;...}

时间: 2024-07-29 02:14:12

CSS表现属性Display:Inline-Block的深入理解的相关文章

对CSS的Display:Inline-Block的深入理解

在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,无论是初接触Web标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊. display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 但对于这个属性不是所有浏览器都识别. 支持的浏览器有:Opera.Safari 但很遗憾,最流行的IE和Firefox却不支持这个属性(据说下一版本的Firefox将会支持display:

实例分析CSS属性Display与Visibility不同

     大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.     visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏.当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置.例:  代码如下 复制代码     <script langu

css display:inline 防止html元素变成块元素

 css中,display:none; 的作用是让html元素隐藏,反之让其显示,通常使用 display:block;.但 display:block; 的另一个作用是,让当前html元素变成块元素.  像 <select>/<input>/<span> 等元素都属于占位元素,也就是说,这几个元素写在一起,但只占一行.而 <div>/<h1>/<h2>/ 等,都会独自占用一行.  现在有这么一个需求:在使用 display:none

CSS浮动属性Float入门教程

CSS浮动属性Float入门教程 什么是CSS Float? float是css的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了css的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样.浮动的元素仍然是网页流的一部分.这与使用绝对定位的页面元素相比是一个明显的不同.绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样.绝对定位的元素不会 影响其它元素,其它元素也不会影响它,

DivCSS小结:浏览器默认HTML的CSS样式属性

核心提示:这个"浏览器默认HTML的CSS样式属性",在你需要还原默认值的时候,比较有用.开始的时候应用通配选择器 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了. 这个"浏览器默认HTML的CSS样式属性",在你需要还原默认值的时候,比较有用.开始的时候应用通配选择器 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了. 但通配选择器在大型网站的构建中,影响性能

如何区分CSS样式中Display与Visibility

虽然是写了这么久的div+css代码了,但是有些时候在用的某一个css 样式属性的时候也会出错,而且错还出的那么可笑. 虽然是写了这么久的div+css代码了,但是有些时候在用的某一个css 样式属性的时候也会出错,而且错还出的那么可笑,有点小儿科,在这儿我就不揭露我的丑文了.直入重点吧!    今天我要和大家来区分一下:CSS样式属性中Display与Visibility和区别,两者貌似相同,其实质确完全不同. 首先来讲一下visibility: visibility属性用来确定元素是显示还是

CSS分类属性

css 显示 语法:  display: <值> 允许值:  block | inline | list-item | none 初始值:  block 适用于:  所有对象 向下兼容:  否  显示属性允许使用四个值中的一个来定义一个元素: block (在元素的前和后都会有换行) inline (在元素的前和后都不会有换行) list-item (与block相同, 但增加了目录项标记) none (没有显示) 每个元素都典型地由浏览器基于HTML规格建议的展示形式给出一个缺省的显示值.

CSS常用属性速查表

属性太多,对于我这种不深入WEB的人员,还是有个速查表方便多了,注意利用开头的目录,会不断更新的 CSS 字体属性(Font) 属性 描述 CSS  font 在一个声明中设置所有字体属性. 1  font-family 规定文本的字体系列. 1  font-size 规定文本的字体尺寸. 1  font-size-adjust 为元素规定 aspect 值. 2  font-stretch 收缩或拉伸当前的字体系列. 2  font-style 规定文本的字体样式. 1  font-varia

display:inline与float:left的正确解释

    首先我们要明确,display:inline;与float:left;正确含义.display:inline;(内联)<CSS权威指南>中文字显示:任何不是块级元素的可见元素都是内联元素.其表现的特性是"行布局"形式,这里的"行布局"的意思就是说其表现形式始终以行进行显示.比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线.如果是块级元素那么所显示的的黑线只