zoukankan      html  css  js  c++  java
  • 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 来解决。

    建议:最好不要使用 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;...}
  • 相关阅读:
    HTML DOM 06 节点关系
    HTML DOM 05 事件(三)
    HTML DOM 05 事件(二)
    HTML DOM 05 事件(一)
    html DOM 04 样式
    html DOM 03 节点的属性
    html DOM 02 获取节点
    html DOM 01 节点概念
    JavaScript 29 计时器
    JavaScript 28 弹出框
  • 原文地址:https://www.cnblogs.com/aobingyan/p/3787727.html
Copyright © 2011-2022 走看看