<?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>随网之舞iframe</title>
	<atom:link href="http://dancewithnet.com/tag/iframe/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>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>Firefox返回时Iframe的显示Bug</title>
		<link>http://dancewithnet.com/2007/05/13/iframe-bug-in-firefox-back/</link>
		<comments>http://dancewithnet.com/2007/05/13/iframe-bug-in-firefox-back/#comments</comments>
		<pubDate>Sat, 12 May 2007 16:25:06 +0000</pubDate>
		<dc:creator>秦歌</dc:creator>
				<category><![CDATA[Javascript & DOM & AJAX]]></category>
		<category><![CDATA[Bug]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[iframe]]></category>

		<guid isPermaLink="false">http://dancewithnet.com/2007/05/13/iframe-bug-in-firefox-back/</guid>
		<description><![CDATA[Bug演示
一个页面有4个Iframe来显示flash内容，其中第二个iframe的显示是用Javascript控制的，只有当特定的cookie存在时才出现，否则显示普通的文本。其控制代码是：
&#60;script type=&#34;text/javascript&#34... ]]></description>
			<content:encoded><![CDATA[<h3>Bug演示</h3>
<p>一个页面有4个Iframe来显示flash内容，其中第二个iframe的显示是用Javascript控制的，只有当特定的cookie存在时才出现，否则显示普通的文本。其控制代码是：<span id="more-1013"></span></p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;//&lt;![CDATA[
if(getCookie(&#39;firefoxIframe&#39;)){
document.write(&#39;&lt;p id=&quot;addAd&quot;&gt;&lt;a href=&quot;cookie.html&quot;&gt;点击这里删除这个iframe&lt;/a&gt;&lt;/p&gt;&#39;);
document.write(&#39;&lt;iframe height=&quot;120&quot; width=&quot;300&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;
frameborder=&quot;0&quot; src=&quot;nAdPre.swf&quot;&gt;&lt;/iframe&gt;&#39;);
}else{
document.write(&#39;&lt;p id=&quot;addAd&quot;&gt;&lt;a href=&quot;cookie.html&quot;&gt;点击这里增加一个iframe&lt;/a&gt;&lt;/p&gt;&#39;);
}
//]]&gt;&lt;/script&gt;</code></pre>
<ol>
<li>打开<a href="/lab/2007/05/iframe-bug-in-firefox-back/" class="link-btn">Bug演示</a>，由于cookie不存在，显示的三个flash都是通过Iframe实现的</li>
<li>点击“点击这里增加一个iframe广告”，跳转到一个新的页面写入名为firefoxIframe的Cookie</li>
<li>点击“返回”或者浏览器的返回按钮，回到Bug演示页面，发现iframe里面的flash错位，<ins datetime="20070514T105240+08:00" title="和RE交流时，发现浏览者可能无法立即察觉出错误现象">即位置2的iframe链接的flash并没有载入，显示的是位置3的flash，位置3的显示的是位置4的flash，位置4的flash却依旧存在</ins>。</li>
<li>关闭标签页(不是关闭整个浏览器，如果关闭整个浏览器Cookie也失效)或新打开一个标签页重新载入该页面，4个Iframe正常显示4个flash</li>
<li>此时如果点击“点击这里删除这个iframe广告”，跳转到新页面删除Cookie，返回也发现Iframe中的flash错位</li>
<li>如果写入Cookie或者删除Cookie时，不通过浏览器的返回，直接通过网址访问，则不会出现错位</li>
</ol>
<h3>简单分析和解决方案</h3>
<p>似乎Firefox返回时，Javascript重新执行了，但是Iframe并未依据src属性重新载入，而是给Iframe和src以类似编号似的配对，而由于返回时Javascript的执行，导致Iframe多了一个（或少了一个），这就导致后面的配对错位。</p>
<p>以上仅为猜测，但这的确是Firefox（2.0.0.3）的一个bug，IE返回时Javascript重新执行，并且Iframe的依据src重新载入，Opera返回时Javascript不重新执行，页面没有变化。</p>
<p>解决方案是在文本中增加一个隐藏的Iframe来占位，上面代码修改如下代码如下：</p>
<pre><code>document.write(&#39;&lt;p id=&quot;addAd&quot;&gt;&lt;a href=&quot;cookie.html&quot;&gt;点击这里增加一个iframe&lt;/a&gt;&lt;/p&gt;&#39;);
<span>//把上面的代码修改成为</span>
document.write(&#39;&lt;iframe src=&quot;#&quot; style=&quot;display:none;&quot;&gt;&lt;/iframe&gt;&#39;);
document.write(&#39;&lt;p id=&quot;addAd&quot;&gt;&lt;a href=&quot;cookie.html&quot;&gt;点击这里增加一个iframe&lt;/a&gt;&lt;/p&gt;&#39;);</code></pre>
<p>请看<a href="/lab/2007/05/iframe-bug-in-firefox-back/fixed.html" class="link-btn">修改后的演示</a>。</p>
]]></content:encoded>
			<wfw:commentRss>http://dancewithnet.com/2007/05/13/iframe-bug-in-firefox-back/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

