css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的
时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素

浮动和边距。今天看到这篇文章不错 就COPY 过来 希望大家做个参考:

display:inline-block
简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行
内,允许空格。但是这个属性目前不是所有的浏览器都支持,只有Opera和Safari支持,FireFox3和IE8
据说将会支持,Firefox2和IE使用特殊办法可以实现这种效果,下面就来探讨一下

在Firefox2中有-moz-inline-stack-moz-inline-box实现,但是这两个私有属性在某些情况下都会
有异常,具体如下:
1、display:-moz-inline-stack
“当它所应用的外包装器(wrapper)的display为inline的时候,它所包含的a或button将无法点击或
无法选取,需要通过position:relative还hack掉这个bug”--乌龙茶
2、display:-moz-inline-box
使用这一属性后,text-align就会出问题,必须使用Firefox的私有属性 -moz-box-align来解决
所以,建议不要使用-moz-inline-box,还是使用-moz-inline-stack

在IE(以下IE8除外)下,如果对内联元素,比如a或span元素,使用inline-block属性是有效的,似乎
IE是支持的,其实是触发了IE的layout,从而拥有了inline-block属性的表症。这样我们就有了一种在
IE下实现display:inline-block效果的两种方法:

1、先用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对
象(原理:这是IE的一个经典bug,如果先定义了display:inline-block,然后再设置display回
inline或block,layout不会消失),代码如下:
div {display:inline-block;}
div {display:inline;}

2、直接让块元素设置为内联对象(display:inline),然后通过zoom:1触发块元素的layout,代码如下:
div {display:inline; zoom:1;}

那么为了能够让所有浏览器支持display:inline-block,综合一下,最终的实现代码如下(参考怿飞:
模拟兼容性的 inline-block 属性):

display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持,另一方面下触
发IE下inline 元素的 hasLayout*/

display:-moz-inline-stack; /* Firefox 的私有属性,需要时还必须用到position:relative解决
上面提到的bug */

zoom:1; /*同样是IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 
效果与 display:inline-block 相似*/

时间: 2024-10-10 14:36:36

css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别的相关文章

[ css 深入理解 vertical-align line-height 属性 ] css中深入理解vertical-align和line-height的基友关系及实例演示的区别

一.想死你们了 几个星期没有写文章了,好忙好痒:个把月没有写长篇了,好忙好想:半个季度没在文章中唠嗑了,好痒好想. 后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦,突然想起来,我就是住在上海郊外的小乡镇上. 刚刚买了几十股京东的股票,第一次玩这个,看好京东的发展.其实股价21的时候就打算入手了,但是,转外汇的时候,提示,要工作时间.然后一忙二忘,等现在入的时候,已经涨了20%多了,科科,肥皂弄人啊!写到这里的时候,忍不住拿出手机一看,哎呦,不错哦,盈利28刀

CSS中常用的字体单位:px、em、rem和%的区别

在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: 1.px px单位名称为像素,像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取).一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割).许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站. 像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备. 2.em

区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性

区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内容自动换行;行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度:<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子,意思是他们默认显示方式是block: display:inl

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

[CSS3] CSS Display Property: Block, Inline-Block, and Inline

Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest. Takeway: Inline: Can NOT add height and width. But can add marg

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

常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 inline :内联对象的默认值.用该值将从对象中删除行.如果其前后都是inline的则在同一行 display:block: 特点: 1.总是在新行上开始 2.该对象随后的内容自动换行 3.高度,行高以及顶和底边距都可控制 4.如果宽度缺

css中display常用属性详解之Block(一)

用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 block 解释:指定对象为块元素(占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样) 特点:1.处于常规流中时,如果width没有设置,会自动填充满父容器  2.可以应用margin/padding  3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素  4.处

你不知道的css中block与inline的区别(转)

所有的HTML元素都属于block和inline之一. block元素的特点是:(1)总是在新行上开始:(2)高度,行高以及顶和底边距都可控制:(3)宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. 相反地,inline元素的特点是: (1)和其他元素都在一行上:(2)高,行高及顶和底边距不可改变:(3)宽度就是它的文字或图片的宽度,不可改变.&l

display:block在css中的意思?

1.css中的display是设置元素显示的方式,block是以块状元素的方式显示,inline是以内联元素的方式显示,none是不显示:块状元素会单独占据一样,其他元素跟他在同一行的会被迫换行,挤到下一行那里去,inline则不会这样.2.待续 原文地址:https://www.cnblogs.com/herizai/p/8452433.html

CSS中block,inline和block-inline的区别(转载)

http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素)