<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display:inline-block的应用两例</title>
<meta name="description" content="display:-moz-inline-stack使Firefox2实现更类似display:inline-block的效果，加之对IE的CSS Hack,能实现跨浏览器的display:inline-block应用" />
<meta name="keywords" content="inline-block,display,css,hack,-moz-inline-box,-moz-inline-stack" />
<style type="text/css">
*{margin:0;padding:0;}
body{padding:2em;background:#242424;color:#ccc;}
h1{text-align:center;line-height:200%;}
h2{margin-top:1em;}
h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;}
h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;}
h3 a:hover{color:#fff;}
h4{margin:1em 0;}
.p{margin:1em 0 2em 0;line-height:1.4em;text-indent:2em;font-size:12px;}
pre{padding:1em;color:#777;text-indent:0;}
em{font-style:normal;}
/* start:arrow */
.replacement{
display:inline-block;
display:-moz-inline-stack;
*display:inline;
zoom:1;
line-height:9999em;
overflow:hidden;
font-size:0;
vertical-align:middle;
/* for arrow-1*/
width:6px;
height:12px;
background:url(signs.png) no-repeat 0 -360px;
}
/*
.replacement i{
visibility:hidden;
display:none;
display:block;
}
*/
.arrow-1{
}
.arrow-2{
width:8px;
background-position:0 -500px;
}
.arrow-3{
width:14px;
background-position:0 -580px;
}
.only-ff2{
padding-left:9999px;
}
/* end:arrow */
#demo-2-content{
padding:2em;
}
#demo-2-content ul,
#demo-2-content p{
display:inline;
}
/*start:pagination*/
ul.pagination{
text-align:center;
}
ul.pagination li{
display:inline-block;
display:-moz-inline-stack;
*display:inline;
zoom:1;
*margin:0 3px;
vertical-align:middle;
_vertical-align:bottom;
position:relative;
}
ul.pagination a{
display:block;
color:#555;
text-decoration:none;
background:#333;
}
ul.pagination a:hover{
color:#999;
background:#444;
}
ul.pagination .selected a{
color:#aaa;
font-weight:bold;
}
ul.pagination .num a{
padding:.1em .3em;
}
ul.pagination .previous a,
ul.pagination .next a,
ul.pagination .first a,
ul.pagination .last a{
display:block;
overflow:hidden;
text-indent:-9999px;
}
ul.pagination .previous,
ul.pagination .next{
height:12px;
width:8px;
}
ul.pagination .previous a,
ul.pagination .next a{
background:url(signs.png) no-repeat 0 -440px;
}
ul.pagination .previous a:hover{
background-position:0 -420px;
}
ul.pagination .next a{
background-position:0 -500px;
}
ul.pagination .next a:hover{
background-position:0 -480px;
}
ul.pagination .first,
ul.pagination .last{
height:12px;
width:14px;
}
ul.pagination .first a,
ul.pagination .last a{
background:url(signs.png) no-repeat 0 -560px;
}
ul.pagination .first a:hover{
background-position:0 -540px;
}
ul.pagination .last a{
background-position:0 -620px;
}
ul.pagination .last a:hover{
background-position:0 -600px;
}
/*end:pagination*/
</style>
</head>
<body>
<h1>display:inline-block的应用两例</h1>
<h3><a href="http://dancewithnet.com/2008/04/05/examples-of-display-inline-block/">说明</a>|<a href="http://dancewithnet.com/2008/04/05/examples-of-display-inline-block/#comments">评论</a></h3>
<h4 id="demo-1">一、ICON</h4>
<div class="p"><i class="arrow-1 replacement">箭头1</i>、<a href="http://dancewithnet.com" class="arrow-2 replacement">箭头2</a>和<p class="arrow-3 replacement">箭头3</p>，虽然你看到的是三个箭头，但是实际上它们是通过CSS用图片替换文字来实现的，其markup是
<pre><i class="arrow-1 replacement">箭头1</i>
<a href="http://dancewithnet.com" class="arrow-2 replacement">箭头2</a>
<p class="arrow-3 replacement">箭头3</p></pre>
利用{display:inline-block;}的特性可以实现行内元素具有固定的高度，这一属性已经在FireFox3 beta、IE8 beta、Opera、Safari中得到广泛的支持，IE6/7中可以利用{display:inline;zoom:1}等方法模拟,Firefox2中需要用其专有属性{display:-moz-display-box;}或{display:-moz-display-stack;} ，利用{text-indent:-9999px;overflow:hidden;}来隐藏inline-block元素中溢出的文字，但是Firefox2下需要再加上{font-size:0;}，然后利用background属性来实现图片的显示。</div>
<!--div class="p">遗憾的是上面两个箭头在Firefox2下发现其要替换的文字并没有得到隐藏，利用{padding-left:9999px;}可以来实现文字的隐藏，如<i class="arrow-1 replacement only-ff2">箭头1</i>、<a href="http://dancewithnet.com" class="arrow-2 replacement only-ff2">箭头2</a>和<p class="arrow-3 replacement only-ff2">箭头3</p>但却导致在其他所有浏览器中乱掉，或许可以在IE6/7/8、Opera和Safari下hack掉这个值，但在Firefox3下如何hack？所以最终的解决方案是增加一层标签，使其不可见来解决。即，如<i class="arrow-1 replacement"><i>箭头1</i></i>、<a href="http://dancewithnet.com" class="arrow-2 replacement"><i>箭头2</i></a>和<p class="arrow-3 replacement"><i>箭头3</i></p>，markup是
<pre><i class="arrow-1 replacement"><i>箭头1</i></i>
<a href="http://dancewithnet.com" class="arrow-2 replacement"><i>箭头2</i></a>
<p class="arrow-3 replacement"><i>箭头3</i></p></pre>。</div-->
<h4 id="demo-2">二、导航</h4>
<div id="demo-2-content">
<p>后面是一个导航。</p>
<ul class="pagination">
<li class="first"><a href="#"><em>首页</em></a></li>
<li class="previous"><a href="#"><em>上一页</em></a></li>
<li class="num selected"><a href="#"><em>1</em></a></li>
<li class="num"><a href="#"><em>2</em></a></li>
<li class="num"><a href="#"><em>3</em></a></li>
<li class="num"><a href="#"><em>4</em></a></li>
<li class="num"><a href="#"><em>5</em></a></li>
<li class="num"><a href="#"><em>6</em></a></li>
<li class="next"><a href="#"><em>下一页</em></a></li>
<li class="last"><a href="#"><em>末页</em></a></li>
</ul>
<p>前面是一个导航。</p>
</div>
</body>
</html>
posted on 2008-10-08 15:51
汪杰 阅读(328)
评论(0) 编辑 收藏 引用 所属分类:
div css dhtml