asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
<!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>&lt;i class=&quot;arrow-1 replacement&quot;&gt;箭头1&lt;/i&gt;
&lt;a href=&quot;http://dancewithnet.com&quot; class=&quot;arrow-2 replacement&quot;&gt;箭头2&lt;/a&gt;
&lt;p class=&quot;arrow-3 replacement&quot;&gt;箭头3&lt;/p&gt;</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>&lt;i class=&quot;arrow-1 replacement&quot;&gt;&lt;i&gt;箭头1&lt;/i&gt;&lt;/i&gt;
&lt;a href=&quot;http://dancewithnet.com&quot; class=&quot;arrow-2 replacement&quot;&gt;&lt;i&gt;箭头2&lt;/i&gt;&lt;/a&gt;
&lt;p class=&quot;arrow-3 replacement&quot;&gt;&lt;i&gt;箭头3&lt;/i&gt;&lt;/p&gt;</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 汪杰 阅读(225) 评论(0)  编辑 收藏 引用 所属分类: div css dhtml
只有注册用户登录后才能发表评论。

<2019年11月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 384828
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜