display inline-block的应用两例

ul.pagination{ display:inline; } ul.pagination li{ display:inline-block; display:-moz-inline-stack; *display:inline; zoom:1; *margin:0 3px,Discuz!NT静态文件缓存(SQUID)解决方案; vertical-align:middle; _vertical-align:bottom; position:relative; /* 解决因为ul的{display:inline;}问题导致Firefox中li里面的链接不可点的bug */ *position:static; /* 解决因为IE6中因为上一行代码带来在{position:relative}容器中移位在bug */ } Tag：display   display  

请看。

Markup：

在这个利用中可以发明-moz-inline-box跟-moz-inline-stack的差别，比方把例二中-moz-inline-stack改成-moz-inline-stack。在实际运用中-moz-inline-box会存在元素间的对齐等问题，固然Firefox还有一个私有属性-moz-box-align来辅助解决对齐问题，但仍旧难以预感问题多多，而绝对来说-moz-inline-stack的表示更像inline-block，这点能够在Firefox3中测试出来。但-moz-inline-stack应用时也会有一个bug，假如一个{display:-moz-inline-stack;}的元素外层元素是{display:inline;}即会使Firefox中其包括的链接不可点，这个须要用{position:relative;}来解决（谢谢乌龙茶）：

CSS的display有属性值inline-block{display:inline-block;}，下面是应用其来实现用图片替换文字的两个例子：

<i class="arrow-1 replacement">箭头1</i> <a href=" class="arrow-2 replacement">箭头2</a> <p class="arrow-3 replacement",Discuz!NT论坛数据库读写分离方案;>箭头3</p>,digg创始人经验分享 发展网站用户的9个方法;

CSS：

/* start:arrow */ .replacement{ display:inline-block;/* Firefox3 beta、IE8 beta、Opera、Safari支撑*/ display:-moz-inline-stack;/* Firefox的私有属性，也可以用-moz-inline-box */ *display:inline; zoom:1;/* 这两行，激活IE6/7的layout，实现相似后果 */ line-height:9999em; overflow:hidden;/* 上面两行，隐藏因设置容器大小而溢出的文字，对Firefox2无效 */ font-size:0;/* 解决上面两行代码在Firefox2下无法隐藏溢出文字*/ /* * 上面是综合怿飞给出肃清溢出文字新方式后的计划，下面是以前的方案 */ text-indent:-9999px; /* 隐藏文字，Safari和Opera下无奈仅用{font-size:0;}来解决 */ overflow:hidden;/* 上面两行,dedecms织梦管理系统的网站搬家的步骤，暗藏因设置容器大小而溢出的文字，对Firefox2无效 */ font-size:0;/* 解决上面两行代码在Firefox2下无法隐藏溢出文字(谢谢怿飞)*/ *text-indent:0; /* 解决IE6/7下text-indent:-9999px的bug， <p><a style="text-indent:-9999px,dedecms 负载性能优化实例;" class="replacement">箭头<,CSS高级技巧 图片替换;/a>文字</p> 相称于 <p style="text-indent:-9999px;"><a class=",CSS高手必知10大秘籍;replacement">箭头</a>文字</p> 导致整段文字的消散，而当该链接前面有文字时则不问题，如： <p>文字<a class="replacement" style="text-indent:-9999px;">箭头<,CSS页面布局中HTML结构化设计;/a>文字</p> */ line-height:0;/* 解决{text-indent:0;font-size:0;}时，IE下文字还留下一条横线的bug */ vertical-align:middle,CSS隐藏文字的几个方法;/* 行内垂直居中，对Opera有特别意思，其和文字混排偏移有点离谱 */ /*default for arrow-1*/ width:6px; height:12px; background:url(signs.png) no-repeat 0 -360px; } .replacement i{ /*display:none;*/ /*visibility:hidden;*/ display:block; /* 由于Firefox2的起因，配合里面的i标签，用来实现文本的隐蔽。 如果用解释局部的任意一个，可以删掉.replacement中的text-indent:-9999px; */ } .arrow-1{ } .arrow-2{ width:8px; background-position:0 -500px; } .arrow-3{ width:14px; background-position:0 -580px; } .only-ff2{ padding-left:9999px; /* 解决单标签下Firefox2下无法隐藏文本问题， 然而对其余版本阅读器都造成宏大影响,CSS透明相关技巧的介绍，不可取 */ } /* end:arrow */

上面的一个较庞杂的应用。