display:inline-block的几个应用及bug

和大家一样经常使用display:inline和display:block来进行块元素(block element)和内联元素(inline element,也叫行内元素)之间的转换。

块元素和内联元素的主要区别:

1.块元素会自动在末尾加一个换行,而内联元素不会,多个内联元素会自动排成一行,比如img标签或span标签插到一行文字中,他会和这行文字自动排成一行,而如果你在这行文字中插入一个块元素标签,比如div标签,那么这个div标签会自己独占一行。查看demo:https://www.html.cn/demo/inline-block/inline-and-block.html
2.块元素可以定义自身的高度(width)和宽度(height),而内联元素不可以。
3.块对象定义的自身垂直边距可以改变行高,而内联元素虽然可以定义但改变不了行高。

更多关于块元素和内联元素可以看看这里https://www.html.cn/archives/646

display:inline-block是什么呢?

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。这就是display:inline-block的作用,再讲的通俗一点就是,Display值为inline-block的元素内部形成一个块状盒模型,而本身形成类似一个内联的被替代元素”。即display为inline-block的元素既可以像块状元素一样定义高度宽度,又可以和内联元素(比如文字)排列在一行。(转载请注明出处:WEB前端开发 https://www.html.cn/)

( ⊙o⊙ )哇,好强大的属性啊!我以前怎么没发现啊?是的很强大,但是以前的FF2,IE6,IE7不支持改属性(目前支持的浏览器:FF3,Opera,Safari,Chrome,ie8),FF2可以使用FF的私有属性display:-moz-inline-box;而且FF2绝大多数已经升级到FF3了,所以不成什么大的问题了,IE6和IE7拥有这个display:inline-block就会触发layout,就相当于zoom:1(关于ie的layout看以查看:https://www.html.cn/archives/tag/haslayout),我们可以用该特性在IE6和IE7下模拟display:inline-block;也可以直接让块元素设置为内联对象呈递然后触发块元素的layout,即display:inline; zoom:1;

display:inline-block的几个应用

1.先看效果图:

2009-06-21_165043

2.html代码:

[code=”html”]

[/code]

3.CSS代码:

[code=”css”]

body{ font-size:12px;}

ol,ul{list-style:none; margin:0; padding:0}

a:link,a:visited{color:#555555;text-decoration:none;}

a:hover{color:#1A7CBC;text-decoration:underline;}

.selector{width:400px;border:1px solid #CDCDCD; padding:0px 2px 2px; margin:0 auto;zoom:1; overflow:hidden;}

.selector ol.tokenList li{float:left; margin-right:2px; margin-top:2px;height: 20px;color:#FFFFFF;}

.selector ol.tokenList li a{display:inline-block;padding-left:5px; height:20px; ?background-image:url(bg.png); background-repeat:no-repeat;background-position:0 0;}

.selector ol.tokenList li a span{ display:inline-block;color:#FFFFFF; height:16px; line-height:1;padding-top:4px; line-height\**\:22px\9; background-image:url(bg.png); background-repeat:no-repeat; background-position:right 0; padding-right:5px; white-space:nowrap;}

.selector ol.tokenList li a:hover {color:#FFFFFF;text-decoration:none;}

.selector ol.tokenList li a span .x{display:inline-block;_display:inline; width:7px;height:7px;vertical-align:middle;cursor:pointer; margin-left:5px;font-size:1px; line-height:1px;background:url(col.png); zoom:1;}

.selector ol.tokenList li input{width:20px;height:16px;margin:0;padding:0;border:0;outline:0;}

[/code]

查看demo:https://www.html.cn/demo/inline-block/inline-block.html

大家可以再看看:

秦歌的display:inline-block的应用两例CSS{display:inline-block}

怿飞的display:inline-block的深入理解模拟兼容性的 inline-block 属性

乌龙茶的inline-block从入门到精通

前端观察的臭番茄的:跨浏览器的inline-block

IE6的bug:(转载请注明出处:WEB前端开发 https://www.html.cn/)

按上述方法display:inline-block或者_display:inline;zoom:1后line-height就失效了,暂时没有好的解决方案,我是通过padding-top来做的,不知道大家有没有什么好的方案,欢迎留言补充。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » display:inline-block的几个应用及bug

评论 5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    IE6 line-height bug解决请看old9的评论
    http://www.99css.com/2009/04/displayinline-block.html#c1528472836941412591

    ytzong10年前 (2009-06-29)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏