<?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>随网之舞光标丢失</title>
	<atom:link href="http://dancewithnet.com/tag/%e5%85%89%e6%a0%87%e4%b8%a2%e5%a4%b1/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>
	</channel>
</rss>

