<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	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/"
		>
<channel>
	<title>Comments on: IE6 DIV 覆盖 Select 元素 Form 控件</title>
	<atom:link href="http://www.leakon.com/archives/189/feed" rel="self" type="application/rss+xml" />
	<link>http://www.leakon.com/archives/189</link>
	<description>勤奋 - 创新 - 矢志不渝 - 锲而不舍</description>
	<lastBuildDate>Thu, 26 Aug 2010 04:55:43 +0800</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>By: vvb</title>
		<link>http://www.leakon.com/archives/189/comment-page-1#comment-1589</link>
		<dc:creator>vvb</dc:creator>
		<pubDate>Fri, 05 Dec 2008 03:27:23 +0000</pubDate>
		<guid isPermaLink="false">http://www.leakon.com/?p=189#comment-1589</guid>
		<description>覆盖select据我所知有两个比较好的方法： 
1，显示层时，先隐藏select，关闭层时再重新显示； 
2，用一个iframe作为层的底，来遮住select。 
详细看这里
http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html</description>
		<content:encoded><![CDATA[<p>覆盖select据我所知有两个比较好的方法：<br />
1，显示层时，先隐藏select，关闭层时再重新显示；<br />
2，用一个iframe作为层的底，来遮住select。<br />
详细看这里<br />
<a href="http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html" rel="nofollow">http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html</a></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: leakon</title>
		<link>http://www.leakon.com/archives/189/comment-page-1#comment-1550</link>
		<dc:creator>leakon</dc:creator>
		<pubDate>Fri, 12 Sep 2008 09:22:40 +0000</pubDate>
		<guid isPermaLink="false">http://www.leakon.com/?p=189#comment-1550</guid>
		<description>&lt;iframe id=backiframe  style=&quot;position:absolute; z-index:9; width:expression(this.nextSibling.offsetWidth); height:expression(this.nextSibling.offsetHeight); top:expression(this.nextSibling.offsetTop); left:expression(this.nextSibling.offsetLeft);&quot;  frameborder=&quot;0&quot; &gt;&lt;/iframe&gt;
&lt;div id=&quot;popupArea&quot; style=&quot;z-index:10;position:absolute;width:0;height:0; left:100px; top:50px;&quot;&gt;&lt;/div&gt;
先用iframe 遮盖住select iframe大小位置自动跟随层变化</description>
		<content:encoded><![CDATA[<p>&lt;iframe id=backiframe  style="position:absolute; z-index:9; width:expression(this.nextSibling.offsetWidth); height:expression(this.nextSibling.offsetHeight); top:expression(this.nextSibling.offsetTop); left:expression(this.nextSibling.offsetLeft);"  frameborder="0" >&lt;/iframe><br />
&lt;div id="popupArea" style="z-index:10;position:absolute;width:0;height:0; left:100px; top:50px;">&lt;/div><br />
先用iframe 遮盖住select iframe大小位置自动跟随层变化</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: leakon</title>
		<link>http://www.leakon.com/archives/189/comment-page-1#comment-1547</link>
		<dc:creator>leakon</dc:creator>
		<pubDate>Fri, 12 Sep 2008 08:59:49 +0000</pubDate>
		<guid isPermaLink="false">http://www.leakon.com/?p=189#comment-1547</guid>
		<description>div遮盖select问题

select,object,iframe标签属于系统级别，所以如果div的z-index设为多少都无法遮盖select

解决办法：
可以将select的visibility样式改为hidden
.selectClass{visibility:&quot;hidden&quot;;}</description>
		<content:encoded><![CDATA[<p>div遮盖select问题</p>
<p>select,object,iframe标签属于系统级别，所以如果div的z-index设为多少都无法遮盖select</p>
<p>解决办法：<br />
可以将select的visibility样式改为hidden<br />
.selectClass{visibility:"hidden";}</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: leakon</title>
		<link>http://www.leakon.com/archives/189/comment-page-1#comment-1546</link>
		<dc:creator>leakon</dc:creator>
		<pubDate>Fri, 12 Sep 2008 08:59:13 +0000</pubDate>
		<guid isPermaLink="false">http://www.leakon.com/?p=189#comment-1546</guid>
		<description>http://www.cnblogs.com/gengxiaochao/archive/2008/06/11/979092.html</description>
		<content:encoded><![CDATA[<p><a href="http://www.cnblogs.com/gengxiaochao/archive/2008/06/11/979092.html" rel="nofollow">http://www.cnblogs.com/gengxiaochao/archive/2008/06/11/979092.html</a></p>
]]></content:encoded>
	</item>
	<item>
		<title>By: leakon</title>
		<link>http://www.leakon.com/archives/189/comment-page-1#comment-1544</link>
		<dc:creator>leakon</dc:creator>
		<pubDate>Fri, 12 Sep 2008 08:47:42 +0000</pubDate>
		<guid isPermaLink="false">http://www.leakon.com/?p=189#comment-1544</guid>
		<description>解决DIV遮盖select的方法

由于IE存在一个bug，会使得DIV层无法遮盖select控件。
我今天说的解决方法是用iframe找到的。其实这个问题的解决方法我今天在网上搜也会很多，不过大部分都是直接用html来实现的。但在实际应用中，我们会更倾向与用js动态生成对象来进行封装。

首先这个实现方式是从google-suggest那得到的启发，起初看suggest的js代码的时候，发现它里面用到了iframe，但是不清楚和div究竟是怎么关联上而又不互相影响的。昨天突然想到可以用selenium的viewdom模块看到其生成的dom对象是如何的，后来发现，suggest是通过两个div来实现的，一个专门用于包含iframe，一个专门用于表现数据，然后再将这两个div重叠即可。很巧妙，但是我怎么没想到。这就应了那句话：简单的才是美的。

现在开始说代码，hoho。
首先是用于遮盖select的层：s

// 创建层
var s=document.createElement(&quot;DIV&quot;);

// 设置层的相关属性
s.style.visibility=&quot;&quot;;

// 定义层的样式
s.style.position=&quot;absolute&quot;;
s.style.left=&quot;200&quot;;
s.style.top=&quot;100&quot;;
s.style.width=&quot;500&quot;;
s.style.height=&quot;90&quot;;
s.style.border=&quot;black 1px solid&quot;;
s.style.backgroundColor=&quot;white&quot;;

// 生成iframe
var L=document.createElement(&quot;IFRAME&quot;);
L.name=&quot;completionFrame&quot;;

// 定义iframe的样式，宽高与s相同
L.width=s.style.width;
L.height=s.style.height;

// 附加L到s
s.appendChild(L);

// 显示s
document.body.appendChild(s);


其次是你要表现数据的DIV层：t
js如下：

// 创建层
var t=document.createElement(&quot;DIV&quot;);

// 设置相关属性
t.style.visibility=&quot;&quot;;
t.zIndex=1;

// 定义样式表，长宽高和定位等
t.style.position=&quot;absolute&quot;;
t.style.left=&quot;200&quot;;
t.style.top=&quot;100&quot;;
t.style.width=&quot;500&quot;;
t.style.height=&quot;90&quot;;
t.style.border=&quot;blue 1px solid&quot;;
t.style.backgroundColor=&quot;white&quot;;

// 定义你要表现的内容
t.innerHTML = &quot;Hello World&quot;;

// 显示
document.body.appendChild(t);


这样就大功告成了，经过测试，在ie和firefox下都是可以的。

这里有几个问题需要说明一下：

生成的L(IFRAME)我并没有指定其src，但是不影响效果。google-suggest里的iframe对象指定了src：http://www.google.com/webhp?complete=1&amp;hl=en，其实就是一个空白页，我想这么写起来可能更严谨一些吧 
按照我上面写的代码，在实际显示的时候，包含iframe的div层可能会稍大一些，也就是会露出“白边”，大家在实际使用的时候可以进行调整 
注意两个层显示的顺序，也就是append到body的顺序，我是先让包含iframe的层显示，再让显示数据的层显示，如果调换，包含iframe的层就会遮住表现数据的层，即使是改两个层的zindex也不能解决，希望有人能关注一下哈 
如果你拷贝我的代码到你的script中，发现不能运行，有可能是你网页编码的问题，因为我的注释全都是用的中文，如果你用en或utf8输出的话，可能就会有问题 
即使是用iframe，在ie下仍然会有一个bug，就是如果其遮盖的地方有获得焦点的输入框时，它无法遮盖那个闪烁的光标。这个问题在gmail里面也没有解决。不过可以通过一些focus操作来解决这个小小的bug。</description>
		<content:encoded><![CDATA[<p>解决DIV遮盖select的方法</p>
<p>由于IE存在一个bug，会使得DIV层无法遮盖select控件。<br />
我今天说的解决方法是用iframe找到的。其实这个问题的解决方法我今天在网上搜也会很多，不过大部分都是直接用html来实现的。但在实际应用中，我们会更倾向与用js动态生成对象来进行封装。</p>
<p>首先这个实现方式是从google-suggest那得到的启发，起初看suggest的js代码的时候，发现它里面用到了iframe，但是不清楚和div究竟是怎么关联上而又不互相影响的。昨天突然想到可以用selenium的viewdom模块看到其生成的dom对象是如何的，后来发现，suggest是通过两个div来实现的，一个专门用于包含iframe，一个专门用于表现数据，然后再将这两个div重叠即可。很巧妙，但是我怎么没想到。这就应了那句话：简单的才是美的。</p>
<p>现在开始说代码，hoho。<br />
首先是用于遮盖select的层：s</p>
<p>// 创建层<br />
var s=document.createElement("DIV");</p>
<p>// 设置层的相关属性<br />
s.style.visibility="";</p>
<p>// 定义层的样式<br />
s.style.position="absolute";<br />
s.style.left="200";<br />
s.style.top="100";<br />
s.style.width="500";<br />
s.style.height="90";<br />
s.style.border="black 1px solid";<br />
s.style.backgroundColor="white";</p>
<p>// 生成iframe<br />
var L=document.createElement("IFRAME");<br />
L.name="completionFrame";</p>
<p>// 定义iframe的样式，宽高与s相同<br />
L.width=s.style.width;<br />
L.height=s.style.height;</p>
<p>// 附加L到s<br />
s.appendChild(L);</p>
<p>// 显示s<br />
document.body.appendChild(s);</p>
<p>其次是你要表现数据的DIV层：t<br />
js如下：</p>
<p>// 创建层<br />
var t=document.createElement("DIV");</p>
<p>// 设置相关属性<br />
t.style.visibility="";<br />
t.zIndex=1;</p>
<p>// 定义样式表，长宽高和定位等<br />
t.style.position="absolute";<br />
t.style.left="200";<br />
t.style.top="100";<br />
t.style.width="500";<br />
t.style.height="90";<br />
t.style.border="blue 1px solid";<br />
t.style.backgroundColor="white";</p>
<p>// 定义你要表现的内容<br />
t.innerHTML = "Hello World";</p>
<p>// 显示<br />
document.body.appendChild(t);</p>
<p>这样就大功告成了，经过测试，在ie和firefox下都是可以的。</p>
<p>这里有几个问题需要说明一下：</p>
<p>生成的L(IFRAME)我并没有指定其src，但是不影响效果。google-suggest里的iframe对象指定了src：http://www.google.com/webhp?complete=1&#038;hl=en，其实就是一个空白页，我想这么写起来可能更严谨一些吧<br />
按照我上面写的代码，在实际显示的时候，包含iframe的div层可能会稍大一些，也就是会露出“白边”，大家在实际使用的时候可以进行调整<br />
注意两个层显示的顺序，也就是append到body的顺序，我是先让包含iframe的层显示，再让显示数据的层显示，如果调换，包含iframe的层就会遮住表现数据的层，即使是改两个层的zindex也不能解决，希望有人能关注一下哈<br />
如果你拷贝我的代码到你的script中，发现不能运行，有可能是你网页编码的问题，因为我的注释全都是用的中文，如果你用en或utf8输出的话，可能就会有问题<br />
即使是用iframe，在ie下仍然会有一个bug，就是如果其遮盖的地方有获得焦点的输入框时，它无法遮盖那个闪烁的光标。这个问题在gmail里面也没有解决。不过可以通过一些focus操作来解决这个小小的bug。</p>
]]></content:encoded>
	</item>
</channel>
</rss>
