<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>随网之舞-moz-inline-stack</title>
	<atom:link href="http://dancewithnet.com/tag/moz-inline-stack/feed/" rel="self" type="application/rss+xml" />
	<link>http://dancewithnet.com</link>
	<description>WEB Design{HTML:CSS:Javascript:DOM:AJAX:PHP:Usability}/Viewpoint/Photo/Food/Mood</description>
	<lastBuildDate>Mon, 18 Jul 2011 02:45:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>display:inline-block的应用两例</title>
		<link>http://dancewithnet.com/2008/04/05/examples-of-display-inline-block/</link>
		<comments>http://dancewithnet.com/2008/04/05/examples-of-display-inline-block/#comments</comments>
		<pubDate>Sat, 05 Apr 2008 01:17:49 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[HTML & CSS]]></category>
		<category><![CDATA[-moz-inline-box]]></category>
		<category><![CDATA[-moz-inline-stack]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Firefox2]]></category>
		<category><![CDATA[inline-block]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/?p=1276</guid>
		<description><![CDATA[CSS的display有属性值inline-block{display:inline-block;}，下面是应用其来实现用图片替代文字的两个例子：
请看例一。
Markup：
&#60;i class=&#34;arrow-1 replacement&#34;&#62;箭头1&#60;/i&#62;
&#60;a href=&#34;http://dancewi... ]]></description>
			<content:encoded><![CDATA[<p><a href="http://dancewithnet.com/2007/10/30/css-display-inline-block/">CSS的display有属性值inline-block{display:inline-block;}</a>，下面是应用其来实现用图片替代文字的两个例子：</p>
<p>请看<a href="http://dancewithnet.com/lab/2008/examples-of-display-inline-block/#demo-1" class="link-btn">例一</a>。</p>
<p><strong>Markup</strong>：</p>
<pre><code>&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;</code></pre>
<p><strong>CSS</strong>：<span id="more-1276"></span></p>
<pre><code><span>/* start:arrow */</span>
.replacement{
    display:inline-block;<span>/* Firefox3 beta、IE8 beta、Opera、Safari支持*/</span>
    display:-moz-inline-stack;<span>/* Firefox的私有属性，也可以用-moz-inline-box */</span>
    *display:inline;
    zoom:1;<span>/* 这两行，激活IE6/7的layout，实现类似效果 */</span>
    line-height:9999em;
    overflow:hidden;<span>/* 上面两行，隐藏因设置容器大小而溢出的文字，对Firefox2无效 */</span>
    font-size:0;<span>/* 解决上面两行代码在Firefox2下无法隐藏溢出文字*/</span>
    <span>/*
      * 上面是综合<a href="http://www.planabc.net/">怿飞</a>给出清除溢出文字新方法后的方案，下面是以前的方案
      */</span>
    <del datetime="2008-04-08T17:21:01+08:00">text-indent:-9999px; <span>/* 隐藏文字，Safari和Opera下无法仅用{font-size:0;}来解决 */</span>
    overflow:hidden;<span>/* 上面两行，隐藏因设置容器大小而溢出的文字，对Firefox2无效 */</span>
    font-size:0;<span>/* 解决上面两行代码在Firefox2下无法隐藏溢出文字(谢谢<a href="http://www.planabc.net/">怿飞</a>)*/</span>
    *text-indent:0;
    <span>/* 解决IE6/7下text-indent:-9999px的bug，
     &lt;p&gt;&lt;a style=&quot;text-indent:-9999px;&quot; class=&quot;replacement&quot;&gt;箭头&lt;/a&gt;文字&lt;/p&gt;
     相当于
     &lt;p style=&quot;text-indent:-9999px;&quot;&gt;&lt;a  class=&quot;replacement&quot;&gt;箭头&lt;/a&gt;文字&lt;/p&gt;
      导致整段文字的消失，而当该链接前面有文字时则没有问题，如：
      &lt;p&gt;文字&lt;a  class=&quot;replacement&quot; style=&quot;text-indent:-9999px;&quot;&gt;箭头&lt;/a&gt;文字&lt;/p&gt;
    */</span>
    line-height:0;<span>/* 解决{text-indent:0;font-size:0;}时，IE下文字还留下一条横线的bug  */</span> </del>

    vertical-align:middle;<span>/* 行内垂直居中，对Opera有特殊意义，其和文字混排偏移有点离谱 */</span>

    <span>/*default for arrow-1*/</span>
    width:6px;
    height:12px;
    background:url(signs.png) no-repeat 0 -360px;
}
<del datetime="2008-04-08T10:09:12+08:00">.replacement i{
    <span>/*display:none;*/</span>
    <span>/*visibility:hidden;*/</span>
    display:block;
     <span>/* 因为Firefox2的原因，配合里面的i标签，用来实现文本的隐藏。
               如果用注释部分的任意一个，可以删掉.replacement中的text-indent:-9999px;  */</span>
}</del>
.arrow-1{
}
.arrow-2{
    width:8px;
    background-position:0 -500px;
}
.arrow-3{
    width:14px;
    background-position:0 -580px;
}
<del datetime="2008-04-08T10:09:12+09:00">.only-ff2{
    padding-left:9999px;
    <span>/* 解决单标签下Firefox2下无法隐藏文本问题，
                 但是对其他版本浏览器都造成巨大影响，不可取 */</span>
}</del>
<span>/* end:arrow */</span>
</code></pre>
<p><a href="http://dancewithnet.com/lab/2008/examples-of-display-inline-block/#demo-2" class="link-btn">例二</a>是例一的一个较复杂的应用。</p>
<p>在这个应用中可以发现<code>-moz-inline-box</code>和<code>-moz-inline-stack</code>的区别，比如把例二中<code>-moz-inline-stack</code>改成<code>-moz-inline-stack</code>。在实际应用中<code>-moz-inline-box</code>会存在元素间的对齐等问题，虽然Firefox还有一个私有属性<a href="http://developer.mozilla.org/en/docs/Mozilla_CSS_Extensions#-moz-box-align">-moz-box-align</a>来帮助解决对齐问题，但依旧难以预料问题多多，而相对来说<code>-moz-inline-stack</code>的表现更像<code>inline-block</code>，这点可以在Firefox3中测试出来。但<code>-moz-inline-stack</code>使用时也会有一个bug，如果一个{display:-moz-inline-stack;}的元素外层元素是{display:inline;}即会使Firefox中其包含的链接不可点，这个需要用<code>{position:relative;}</code>来解决（谢谢<a href="http://hi.baidu.com/dcpl/">乌龙茶</a>）：</p>
<pre><code>ul.pagination{
    display:inline;
}
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;
    <span>/* 解决因为ul的{display:inline;}问题导致Firefox中li里面的链接不可点的bug */</span>
    *position:static;
    <span>/* 解决因为IE6中因为上一行代码带来在{position:relative}容器中移位在bug */</span>
}</code></pre>
<p>更多Firefox的私有属性可以看<a href="http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions">CSS Reference:Mozilla Extensions</a>和<a href="http://developer.mozilla.org/en/docs/Mozilla_CSS_Extensions">Mozilla CSS Extensions</a>。</p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2008/04/05/examples-of-display-inline-block/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
	</channel>
</rss>

