<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/vnd.wap.wml; charset=utf-8"/>
<meta http-equiv="Cache-Control" content="no-cache"/></head>
<card title="有关层的两个便签 - Gracecode.com">
<p>两个都是不大不小的问题，在这里记录一下。</p>

<h3>Flash 的遮盖问题</h3><p>Flash 在默认没有相应参数的情况下，会遮盖 HTML 层并不受 CSS 的 z-index 属性控制。在这里有个简单的方法，就是在 object 中加入</p>

<pre>&lt;param value=&quot;transparent&quot; name=&quot;wmode&quot; /&gt;</pre><p>即可。如果使用了 embed ，务必将此属性也加入</p>

<pre>wmode=&quot;transparent&quot;</pre><p>这样，就不会遮盖绝对定位的层了。不过此时 object 还是不受 CSS 的 z-index 控制，寻求解决方案中。</p>

<p>参考链接，<a href="http://is.gd/pgv" title="http://is.gd/pgv">这里</a> 还有 <a href="http://is.gd/pgw" title="http://is.gd/pgw">这里</a>。</p>

<h3>Explorer 6 下的 select 遮盖问题</h3><p>这是个老的问题了，但是如果不小心的话还是出出现。问题是在 Explorer 6 下，某个绝对定位的层无法遮住 select 控件，而解决的办法就是使用 iframe 将其遮住，代码如下：</p>

<pre>&lt;!--[if lte IE 6.5]&gt;
&lt;div style=&quot;position:absolute;z-index:-1; top: 0; left: 0;&quot;&gt;
    &lt;iframe 
       style=&quot;filter:alpha(opacity=0); width:210px; height: 110px;&quot;&gt;
    &lt;/iframe&gt;
&lt;/div&gt;
&lt;![endif]--&gt;</pre><p>因为这仅仅是 Explorer 6 的问题，所以使用了条件注释，避免其他浏览器加入无谓的结构。</p>

<p><img src="http://pic.yupoo.com/feelinglucky/015845a70e80/medium.jpg" alt="http://pic.yupoo.com/feelinglucky/015845a70e80/medium.jpg" title="http://pic.yupoo.com/feelinglucky/015845a70e80/medium.jpg" /></p>

<p><del>期间和 小马 讨论过是否将其写成脚本，回答是“基于效果、或者 BugFix 类的问题，出于效率的考虑，尽量不要使用脚本”。我同意他的观点，比如上述的代码对于其他非 Explorer 浏览器而言，仅仅是注释而已。</del></p>

<p>进一步的改进，可以使用脚本判断时候否是 Explorer 6 ，并动态加入 iframe 。排除效率的问题，这样操作更通用些。</p>

<p>相关的参考资料：<a href="http://is.gd/pgm" title="http://is.gd/pgm">这里</a>、<a href="http://is.gd/pgn" title="http://is.gd/pgn">这里</a> 还有 <a href="http://is.gd/pgl" title="http://is.gd/pgl">这里</a>。</p>

<p>最后，上述两个问题的 DEMO 页面<a href="http://www.gracecode.com/lab/layer.html" title="http://www.gracecode.com/lab/layer.html">在这里</a>。</p>

<p><tt>--EOF--</tt></p>

<p>顺便提下，<a href="http://blog.yupoo.com/?p=245" title="http://blog.yupoo.com/?p=245">Yupoo 支持 Flash 图像输出了</a>，正好在这里用上。不过，我更喜欢直接用原图，这样更通用些。</p>


<p>
<a href="http://www.gracecode.com/wap/">Gracecode.com</a> |
<a href="http://www.gracecode.com/wap/d/1745 ">Permalink</a>(<a href="http://www.gracecode.com/Archive/Display/1745 ">xHTML</a>) |
<a href="http://www.gracecode.com/Trackback/Recieve/1745/ksl1xv">Trackback</a> |
<a href="http://rss.gracecode.com">Rss</a>
</p>
</card>
</wml>