很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章,很不错,综合一下,记录下来。
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 相似*/
/*扩展一下一些其他可能用到的属性*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隐藏文字,可用这四个属性 */
/*另外上面隐藏文字,还可以用更简化的方法:line-height:超级大值;font-size:0; */
overflow:hidden; /* 隐藏溢出的内容 */
vertical-align:middle; /* 行内垂直居中,针对 Opera 比较大的偏离 */
width:?px; /*?为任意非auto值*/
height:?px; /*?为任意非auto值*/
分享到:
相关推荐
什么是块元素block和内联元素inline,什么是块元素block和内联元素inline。。。
个人主页:www.xmqisheng.com 包含了曾经讲网页过程中的块元素与内联素区别时的知识点课件。
CSS文档流与块级元素(block)内联元素(inline)那点事
块状元素与内联元素大全 html标签中所有块状元素与内联元素 对前端的开发设计有很大帮助
块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。默认情况下块...
css块状元素与内联元素以及inline-block
是在CSS布局页面中很重要的两个概念,必须要理解透彻!既然说到概念就先看看块状元素和内联元素的定义。
CSS文档流与块级元素(block)、内联元素(inline)
块元素又名块级元素,和其对应的是内联元素,都是html规范中的概念,内联元素其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等
每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。 内联元素也不会独有一行. 简直一切元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。 有三种...
①CSS 行内元素 ②CSS 区块元素 ③CSS 内联块元素
在一个元素的属性中绑定事件,实际上就创建了一个内联事件处理函数(如…),内联事件处理函数有其特殊的作用域链,并且各浏览器的实现细节也有差异。 造成的影响 如果在元素的内联事件处理函数中使用的变量或调用的...
获取元素节点行内样式、内联样式、外链样式(兼容性问题)、获取元素在页面上的偏移量(有定位和没有定位的注意点)、附代码演示。
内容偏门,适合打基础,补足基础的同志们
CSS实例 盒模型、块状元素与内联元素、CSS选择器.
ARM GCC 内联汇编参考手册
块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(width)高度(height)属性,正常流中的块级元素会垂直摆放。常见块状元素为“div” 内联元素(行内...
VC内联汇编资料 VC内联汇编资料 VC内联汇编资料 VC内联汇编资料