`

有关各浏览器兼容display:inline-block

阅读更多

  我们说的标签一般分两种,一种是块级元素,一种就是内联元素。

  它们各有各的特点,块级元素是指,这个元素将会换行,而内联元素的优势就是会在一行内可以显示多个内容,可以说起一个 “小”浮动的作用。

 但是我们有时在不得已的情况要,要将一个内联元素,有块级元素的特征,但是又不要让它换行,怎么办?

 好了,既然问题出来了,我们就来解决它。

display:inline-block 这是一好东东哦。它就是实现内联转换成块组元素的好帮手。

但是在不同浏览器下就显示的效果可能不同。在FF中我们能正常显示,效果能出来。但是在IE下,问题出现了,它将以块级元素来显示,就是换行了,而我的最终目的是不让它换行。

So,我们不得不拿出hack技术出来:zoom:1;*display:inline; 这两个是在IE中显示效果的hack技术。

这样问题就OK了。

 

分享到:
评论

相关推荐

    有关display:inline-block在FF出现空白的解决方案

    这个问题在标题“有关display:inline-block在FF出现空白的解决方案”中被提及。 首先,我们要理解为什么会出现这样的现象。当使用`display:inline-block`时,元素会像内联元素那样排列,但是它们仍然保留了块级元素...

    display:inline-block的实际应用

    2. **兼容性问题**:虽然 `display:inline-block` 在现代浏览器中支持良好,但在一些较旧的浏览器,如IE6/7,需要使用 `*zoom:1` 或 `display:inline` 并结合 `*display:inline` 来实现兼容。 3. **内联限制**:尽管...

    CSS属性display:inline-block用法深入理解

    下面我们将深入探讨`display:inline-block`的用法及其浏览器兼容性问题。 首先,`display:inline-block`的作用是将元素呈现为内联对象,这意味着它们会与其他内联元素排列在同一行中,不会强制换行。同时,`inline-...

    display:inline-block的原理分析

    理解 `display:inline-block` 的工作原理和浏览器兼容性对于编写高效、可维护的 CSS 代码至关重要。在实际应用中,通常还需要配合使用 vendor prefixes 和条件注释等技术来确保在不同浏览器中的兼容性。此外,随着...

    让IE6/IE7支持display:inline-block属性的两种方法

    然而,IE6和IE7这两个较老的浏览器对`display:inline-block`的支持并不完善,这给开发者带来了不小的困扰。为了解决这个问题,本文将详细介绍两种方法,使得这些旧版IE浏览器也能正确地处理`display:inline-block`。...

    CSS教程:inline-block在各浏览器的显示

    本文将详细解析`inline-block`的工作原理,以及如何处理浏览器兼容性问题。 首先,理解`inline-block`的基本概念至关重要。`inline-block`让元素在一行内显示,就像文本一样,但它们保持着块级元素的特性,比如可以...

    深入display:inline-block

    尽管`display:inline-block`的兼容性和使用上存在一些历史遗留问题,但随着现代浏览器的普及,这些问题已经大大减轻。现在,`display:inline-block`已成为实现灵活布局的常用工具,尤其适用于创建列表、导航菜单、...

    inline-block 前世今生1

    总之,display:inline-block是CSS布局中的一个强大工具,但它的兼容性和行为需要根据不同的浏览器进行调整。深入理解这个属性的前世今生,以及与之相关的hasLayout、Block formatting contexts等概念,对于提升前端...

    css解决display:inline-block;产生的缝隙(间隙)的方法

    在CSS布局中,`display: inline-block` 是一个常用的属性,它允许元素以行内元素的方式排列,同时具有块级元素的部分特性,如指定宽度和高度。然而,使用`display: inline-block` 时,元素之间往往会出现一些...

    关于css display: inline block inline-block的区别分析

    - `display: inline-block` 在某些老版本的浏览器,尤其是IE6和IE7中,存在兼容性问题。在Firefox中,可以使用 `-moz-inline-box`,但会有副作用,例如`text-align`的问题,需要使用私有属性 `-moz-box-align` 解决...

    跨浏览器的inline-block声明上承诺了很多提供的却很少

    通过在display属性中先声明"-moz-inline-stack",再声明"inline-block",可以确保在支持inline-block的浏览器中使用inline-block,而在不支持的情况下则使用兼容的替代方案。 更进一步,针对IE浏览器,尤其是IE7,...

    CSS之display引用运用

    - **使用Polyfill**:对于不支持`display:inline-block`的浏览器,可以使用Polyfill来提供兼容性支持。 - **使用`display:table-cell`**:对于垂直居中的需求,可以在不支持`display:inline-block`的浏览器中使用`...

    兼容浏览器的css inline-block写法

    需要注意的是,在现代浏览器中,display:inline-block已经是被普遍支持的,因此通常不需要额外的兼容性写法。但是,对于一些还在使用旧版浏览器的用户,我们仍然需要提供兼容性的解决方案,以保证网页的正常显示和...

    浅谈inline-block及解决空白间距

    在网页布局中,`display: inline-block` 是一个非常有用的 CSS 属性,它允许元素表现得像内联元素(inline)一样,同时可以设置宽高(block-like)。然而,在使用 `display: inline-block` 时,经常会遇到一个问题,...

Global site tag (gtag.js) - Google Analytics