<?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>随网之舞Firefox2</title>
	<atom:link href="http://dancewithnet.com/tag/firefox2/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>
		<item>
		<title>Firefox2中输入框丢失光标bug</title>
		<link>http://dancewithnet.com/2008/03/08/cursor-disappears-in-firefox2/</link>
		<comments>http://dancewithnet.com/2008/03/08/cursor-disappears-in-firefox2/#comments</comments>
		<pubDate>Sat, 08 Mar 2008 15:40:08 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[HTML & CSS]]></category>
		<category><![CDATA[Bug]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Firefox2]]></category>
		<category><![CDATA[iframe]]></category>
		<category><![CDATA[overflow]]></category>
		<category><![CDATA[光标丢失]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/2008/03/08/cursor-disappears-in-firefox2/</guid>
		<description><![CDATA[在Firefox2中某些情况下输入框虽然可以输入，但在获取焦点时没有文本输入光标的显示，这个是非常恶心的bug，非常容易让表单使用者有一种不能输入的错觉，即使后来尝试知道可以输入，但也... ]]></description>
			<content:encoded><![CDATA[<p>在Firefox2中某些情况下输入框虽然可以输入，但在获取焦点时没有文本输入光标的显示，这个是非常恶心的bug，非常容易让表单使用者有一种不能输入的错觉，即使后来尝试知道可以输入，但也无法判断光标定位在哪儿。虽然庆幸的是Firefox3中解决了这个bug，但Firefox3还在beta阶段，取代Firefox2还是需要一些时间的，下面就来仔细说一下这个问题：<span id="more-1271"></span></p>
<h3>一、样式为<code>{position:absolute;}</code>的容器中的表单输入框在样式为类似<code>{overflow:auto;}</code>的容器区域中失去光标</h3>
<p>可以通过<a href="http://dancewithnet.com/lab/2008/cursor-disappears-in-firefox2/" class="link-btn">例一到例六</a>来了解最常见的情况。</p>
<p>如果想整个<code>body</code>都出现失去光标，可以设置<code>html</code>和<code>body</code>两个容器，请看<a href="http://dancewithnet.com/lab/2008/cursor-disappears-in-firefox2/html-body-1.html" class="link-btn">示例</a>。包括举例的<code>overflow:auto</code>在内能引起该Bug的<code>overflow</code>属性共有：</p>
<ol>
<li><code>overflow:auto</code></li>
<li><code>overflow-x:auto;</code></li>
<li><code>overflow-y:auto;</code></li>
<li><code>overflow:scroll;</code></li>
<li><code>overflow-x:scroll;</code></li>
<li><code>overflow-y:scroll;</code></li>
<li><code>overflow-x:hidden;</code></li>
<li><code>overflow-y:hidden;</code></li>
</ol>
<p>除了避免使用<code>overflow</code>属性的其他解决方案：</p>
<ol>
<li>利用<code>overflow:hidden</code>代替产生bug的<code>oveflow</code>属性</li>
<li>在具有上述<code>overflow</code>属性的容器中加入<code>position:relative</code>，请看<a href="http://dancewithnet.com/lab/2008/cursor-disappears-in-firefox2/html-body-2.html" class="link-btn">实例</a>。</li>
<li>在<code>positon:absolute</code>的容器上加入同样的<code>oveflow</code>属性，同时注意在页面出现的顺序，见<a href="http://dancewithnet.com/lab/2008/cursor-disappears-in-firefox2/#demo-4" class="link-btn">例四</a></li>
<li>为使用能产生bug的<code>oveflow</code>属性的容器选择合适的标签，比如<code>fieldset</code>，见<a href="http://dancewithnet.com/lab/2008/cursor-disappears-in-firefox2/#demo-6" class="link-btn">例六</a>。</li>
</ol>
<h3>二、样式为{position:absolute;}的容器中的表单输入框在<code>iframe</code>容器区域中失去光标</h3>
<p>可以通过<a href="http://dancewithnet.com/lab/2008/cursor-disappears-in-firefox2/#demo-7" class="link-btn">例七</a>来了解这个情况。IE6中为了解决下拉列表级别过高问题，往往需要用<code>iframe</code>来遮盖它，偶尔疏忽忘记做浏览器限定就有可能导致上面的问题。</p>
<p>现在看来Firefox2对iframe的处理bug还真不少，比如以前就发现了<a href="http://dancewithnet.com/2007/05/13/iframe-bug-in-firefox-back/">Firefox返回时Iframe的显示Bug</a>。</p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2008/03/08/cursor-disappears-in-firefox2/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>如何让Firefox2和Firefox3在Windows下共存并同时运行？</title>
		<link>http://dancewithnet.com/2008/02/01/how-to-run-both-firefox2-and-firefox3-together/</link>
		<comments>http://dancewithnet.com/2008/02/01/how-to-run-both-firefox2-and-firefox3-together/#comments</comments>
		<pubDate>Thu, 31 Jan 2008 16:36:46 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[web2.0 & so on]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Firefox2]]></category>
		<category><![CDATA[Firefox3]]></category>
		<category><![CDATA[浏览器]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/2008/02/01/how-to-run-both-firefox2-and-firefox3-together/</guid>
		<description><![CDATA[相对于Firefox2来说，Firefox3除了采用全新的Gecko 1.9引擎外，在性能、稳定性和安全性方面进行许多改进，在我们最关心的对站点和网页应用的改进也相当多的。去年底，Firefox3 beta2就已经发布了... ]]></description>
			<content:encoded><![CDATA[<p>相对于Firefox2来说，Firefox3除了采用全新的Gecko 1.9引擎外，在性能、稳定性和安全性方面进行许多改进，在我们最关心的<a href="http://developer.mozilla.org/en/docs/Firefox_3_for_developers">对站点和网页应用的改进也相当多的</a>。<a href="http://www.mozillazine.org/talkback.html?article=22782">去年底，Firefox3 beta2就已经发布了</a>，正式版的推出也为期不远了，是时候在网页开发中考虑它了，所以我们不仅在要同一系统中装多个浏览器、多个版本的IE<ins datetime="2008-02-24T21:35:41+08:00">（<a href="http://tredosoft.com/Multiple_IE">Multiple IE</a>）</ins>，现在我们也需要装两个版本的Firefox了。在网上很早就有<a href="http://it.21cn.com/software/sygj/2008/01/02/4096106.shtml">Linux下让Firefox3与Firefox2共存</a>的介绍，下面介绍一种Windows下两者共存的方法。<span id="more-1236"></span></p>
<ol>
<li><a href="http://www.mozilla.com/en-US/firefox/all-beta.html">下载Firefox3，目前是beta2</a>。</li>
<li>打开命令运行窗口（开始>运行或快捷键win+R），然后运行命令<code>firefox -profilemanager -no-remote</code>，打开Firefox的配置文件管理器。<code>–no-remote</code>命名允许浏览器正在运行的时候打开配置文件管理器。<br /><img width="347" height="168" src='http://dancewithnet.com/wp-content/uploads/2008/02/run-firefox3-1.png' alt='命名运行窗口' /></li>
<li>点击“创建配置文件”按钮，创建一个名为Firefox3或者其他名字的配置文件。去掉对“启动时不询问”的选择。这一步是为Firefox3创建一个新的配置文件。<br /><img width="363" height="262" src='http://dancewithnet.com/wp-content/uploads/2008/02/run-firefox3-2.png' alt='创建新的配置文件' /></li>
<li>在Firefox2的快捷方式上点击右键，然后选择属性。在“目标”输入框中<code>.exe"</code>的后面输入一个空格和<code>-p default</code>，然后关闭。这步是告诉快捷方式使用默认配置文件来运行Firefox2。<br /><img width="367" height="466" src='http://dancewithnet.com/wp-content/uploads/2008/02/run-firefox3-3.png' alt='告诉快捷方式使用默认配置文件来运行Firefox2' /></li>
<li>安装Firefox3，“安装类型”选择“自定义”，这样就可以选择安装新的安装地方。虽然默认文件夹名是Mozilla Firefox 3 beta 2，但是最好还是自己重新定义一个，这样以后升级新的版本时候不用做什么修改。<br /><img width="503" height="386" src='http://dancewithnet.com/wp-content/uploads/2008/02/run-firefox3-4.png' alt='“安装类型”选择“自定义”' /><br /><img width="503" height="386" src='http://dancewithnet.com/wp-content/uploads/2008/02/run-firefox3-5.png' alt='修改安装路径' /></li>
<li>在安装结束时，不选择“立即运行Firefox”选项。如果现在运行，它使用的是默认配置文件，这不是我们想要的。<br /><img width="503" height="386" src='http://dancewithnet.com/wp-content/uploads/2008/02/run-firefox3-6.png' alt='在安装结束时，不选择“理解运行Firefox”选项。' /></li>
<li>在Firefox3的快捷方式上单击右键，选择“属性”，在目标输入框的<code>-no-remote -p firefox3</code>。这步是告诉这个快捷方式使用配置文件Firefox3来运行。<br /><img width="367" height="466" src='http://dancewithnet.com/wp-content/uploads/2008/02/run-firefox3-7.png' alt='使用配置文件Firefox3来运行' /></li>
</ol>
<p>这样我们就可以在同一个系统中同时运行Firefox2和Firefox3了。遗憾的是Firefox3基本上不支持Firefox2上的add-on，包括Firebug，幸运的是已经有了适用于Firefox3的<a href="http://getfirebug.com/releases/">Firebug 1.1 beta</a>。</p>
<p>这个方法来自于<a href="http://www.webindepth.com/how-to-run-both-firefox-2-and-firefox-3-together/">How to Run both Firefox 2 and Firefox 3 Together</a>。</p>
<p><ins datetime="2008-02-24T21:53:00+08:00">刚发现有了<a href="http://www.dangerouslyawesome.com/2008/02/22/more-than-one-firefox-beta-to-rule-them-all-a-dave-martorana-concoction/">MultiFireFox</a>，这个是用Python写的跨平台的程序，有兴趣的可以编译试试。对于Mac用户提供了专门的<a href="http://s3.amazonaws.com/multifox/MultiFireFox.dmg">MultiFirefox DMG</a>。谢谢<a href="http://www.fireyy.com/internet/os/429.html">fireyy</a></ins></p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2008/02/01/how-to-run-both-firefox2-and-firefox3-together/feed/</wfw:commentRss>
		<slash:comments>34</slash:comments>
		</item>
	</channel>
</rss>

