`

inline-block用法一则

阅读更多
引用

/*----->>常用图标列表<<-----*/
.app_icon_coin{ display:-moz-inline-box;display:inline-block;*display:inline;*zoom:1;width:16px; height:16px; margin:0 4px; background:url(/app_images/sprite_icon/sprite_icon_a.png) no-repeat 0 -205px; vertical-align:text-bottom}


碰到的bug解决

 .app_ul_a{ font-size:0}
.app_ul_a li{ background:url(/app_images/sprite_arrow_a.png) no-repeat 0 12px; line-height:24px; padding-left:12px; vertical-align:middle; font-size:12px}


http://www.qianduan.net/cross-browser-inline-block.html
分享到:
评论

相关推荐

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

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

    css之display属性之inline-block布局实现详解

    `inline-block`是`display`属性的一个很有用的值,它结合了`inline`和`block`的特性。元素以行内方式显示,但仍然可以设置宽度和高度,同时支持`padding`和`margin`的全方位设置。这使得元素可以在同一行内排列,而...

    使用display:inline-block居中没有宽度的元素

    "使用display:inline-block居中没有宽度的元素"这个主题主要涉及到CSS中的两个关键概念:`text-align`属性和`display`属性的`inline-block`值,它们在实现动态或未知宽度元素的居中对齐上发挥着重要作用。...

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

    然而,在使用 `display: inline-block` 时,经常会遇到一个问题,那就是元素间会存在额外的空白间距。本文将探讨这个问题及其解决方案。 首先,当我们将元素设置为 `display: inline-block` 时,这些元素会按照文本...

    CSS中使用inline-block来进行居中的示例

    这种特性使得`inline-block`成为居中对齐的一种实用方法,尤其是当元素数量不确定或需要保持元素间的间距时。 首先,要实现`inline-block`居中,我们需要一个包含这些元素的容器,容器的`text-align`属性应设置为`...

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

    在CSS布局中,`display`属性是一个至关重要的样式规则,用于定义元素的...因此,掌握 `display: inline`、`display: block` 和 `display: inline-block` 的用法,能够帮助开发者创建更灵活和适应各种屏幕尺寸的网页。

    深入了解float与inline-block

    总结以上内容,理解float和inline-block的使用方法和它们各自的优缺点,可以帮助我们根据不同的设计需求选择合适的布局方式。在大多数情况下,我们可能更倾向于使用inline-block来避免浮动带来的父元素高度塌陷问题...

    深入display:inline-block

    1. 先使用`display:inline-block`触发hasLayout,然后在同一个选择器中添加`display:inline`,这样元素会先变为内联元素。注意,这两个声明必须分开写,否则IE不会正确处理。 ```css div { display: inline-block; ...

    使用font-size:0px 来制作跨浏览器的inline-block css属性

    然而,不同浏览器对`inline-block`的支持程度不同,尤其是在较旧版本的IE(如IE6和IE7)中,需要使用特定的hack方法来模拟`inline-block`的行为。常见的解决方式是将`display`属性设置为`inline`并结合`zoom: 1`,以...

    模拟兼容性的 inline-block 属性

    使用 `inline-block` 可以让元素在不独占一行的情况下,自由控制宽高,同时保持在行内元素行列中的排列。 然而,不同浏览器对 `inline-block` 的支持情况并不一致。在旧版的浏览器如 IE6 和 IE7 中,并不支持 `...

    inline-block元素默认间距的两种清除方法示例代码

    ### 方法一:使用`letter-spacing` `letter-spacing`属性通常用于设置字符间的间距,但在这里,我们可以巧妙地利用它来消除`inline-block`元素之间的间距。在CSS中,我们将`letter-spacing`设置为负值,例如`-0.5em...

    如何消除inline-block属性带来的标签间间隙

    - 在现代浏览器中,可以使用 CSS Flexbox 或 CSS Grid 布局来更灵活地控制元素的排列,这两种方法通常不会产生 `inline-block` 的间距问题。 6. **移除空白和换行符** - 在 HTML 代码中,可以通过删除或合并相邻 ...

    inline-block元素的4px空白间距解决方案

    然而,使用`inline-block`时会遇到一个问题,即元素之间会自动产生一个大约4像素(在某些浏览器中可能是8像素)的空白间距。这个问题在IE8-9、Firefox、Safari等浏览器中尤为明显,而Chrome中则表现为8像素。这个...

    span掉落的演示代码

    当我们设置`display:block-inline`或者`display:inline-block`(注意,实际的CSS属性是`inline-block`,而不是`block-inline`),我们希望创建一种元素,它既能像内联元素一样并排显示,又可以像块级元素一样设置宽...

    项目笔记项目笔项目笔记记

    - **定义**:`display:inline-block` 是一个CSS属性值,允许元素像内联元素一样显示(不会换行),同时拥有块级元素的特性,即可以设置宽度、高度等。 - **兼容性**:IE6 及以上版本浏览器支持 `display:inline-...

    css左右居中对齐

    在`test.html`文件中,可能包含一个使用上述某一种或多种方法实现居中对齐的示例。你可以打开文件查看具体代码,理解其工作原理,并根据实际需求选择合适的布局方式。对于初学者,建议优先使用Flexbox和Grid布局,...

    line-block的运用最小宽度的设置

    在 IE 中,可以通过触发 `layout` 来模拟 `line-block` 的效果,而在 Firefox 中则需要使用非标准的 `-moz-inline-box` 属性。 在给出的代码示例中,`.box` 类被用于定义一个具有 `line-block` 行为的元素。首先,`...

Global site tag (gtag.js) - Google Analytics