很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(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 相似*/

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

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

    在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...

  2. CSS中的display属性(none,block,inline,inline-block,inherit)

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

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

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  4. [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 ...

  5. CSS display的几个常用的属性值,inline , block, inline-block

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

  6. CSS中的块级元素(block)与行内元素(inline)

    css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...

  7. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

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

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

  9. display:block;inline;inline-block大总结

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

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

    http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level e ...

随机推荐

  1. JS 判断object是否包含某个键

    1. myObj.hasOwnProperty('myKey'); 2. if ('key' in myObj)

  2. C#-MVC开发微信应用(6)--用户分组信息管理

    让我们继续深入探索这方面的技术,为了更好的应用起来,专心做好底层的技术开发.本篇继续上一篇的介绍,主要介绍分组管理方面的开发应用,这篇的内容和上一篇,作为一个完整的用户信息和分组信息管理的组合. 1. ...

  3. 如何保留自己对eclipse的个性化设置,在其他工程中使用

    有的个性化设置是在功能的.metadata\.plugins文件夹下保存.所以新建功能后,个性化设置都没有了. 解决办法: 新建一个工程后,调好个性化配置.然后备份整个工程. 以后不要新建工程,直接解 ...

  4. Vue(八):监听属性watch

    Vue.js 可以通过 watch 来响应数据的变化. 以下实例模拟购物车里商品数量增加,对应价格也增加 <!--模拟购物车商品数量增加,价格也随之增加--> <div id = & ...

  5. 第三部分:Android 应用程序接口指南---第二节:UI---第三章 菜单

    第3章 菜单 在许多不同类型的应用中,菜单通常是一种用户界面组件.为了提供给用户提供熟悉且一致的体验,你需要使用菜单API来展示用户动作和你Activity中的其他选项. 从安卓3.0系统(API l ...

  6. 《软件测试自动化之道》读书笔记 之 基于反射的UI测试

    <软件测试自动化之道>读书笔记 之 基于反射的UI测试 2014-09-24 测试自动化程序的任务待测程序测试程序  启动待测程序  设置窗体的属性  获取窗体的属性  设置控件的属性  ...

  7. 设计模式---策略模式Strategy(对象行为型)

    1. 概述 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它的客户而独立变化. 策略模式是对算法的封装,它把算法的责任和算法本身分割开,委派给不 ...

  8. Android开发(十六)——Android listview onItemClick事件失效的原因

    参考: Android listview onItemClick事件失效的原因.http://blog.csdn.net/wangchun8926/article/details/8793178

  9. JavaScript Scroll家族以及封装

    JavaScript Scroll家族以及封装 scrollTop & scrollLeft 别卷去的值,就是当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方或左侧的距离 获得scrollTop ...

  10. java.lang.String.regionMatches方法使用

    regionMatches(boolean ignoreCase,int toffset,String other,int ooffset,int len): regionMatches(int to ...