jQuery：IE6 中的窗口控件存在问题
Posted
技术标签:
【中文标题】jQuery：IE6 中的窗口控件存在问题【英文标题】：jQuery: Problem with windowed controls in IE6 【发布时间】：2010-09-15 11:45:24 【问题描述】：我有一个包含选择框的网页。当我打开一个 jQuery 对话框时，它部分显示在选择框的后面。
我应该如何解决这个问题？我应该隐藏选择框还是 jQuery 提供某种“垫片”解决方案。 （我用谷歌搜索过，但没有找到任何东西）
这是一些代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>testJQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
<link rel="stylesheet" href="theme/smooth/theme.css" type="text/css" media="screen" />
</head>
<body>
<a class="pop" href="nix">Click me</a>
<p/>
<select size="20">
<option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option>
<option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option>
<option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option>
<option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option>
<option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option>
</select>
<div id="xyz" class="flora hiddenAsset">
<div id="dialog" title="Edit Link">
<p>Enter the link details:</p>
<table border="1">
<tr><td>URL</td><td><input id="url" style="width:100%" maxlength="200" value="url"/></td></tr>
<tr><td>Title</td><td><input id="title" style="width:100%" maxlength="200" value="title"/></td></tr>
<tr><td>Target</td><td><input id="target" size="20" maxlength="200" value="target"/></td></tr>
</table>
</div>
</div>
<script type="text/javascript" src="../script/firebug/firebug.js"></script>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery-ui-1.5.2.js"></script>
<script type="text/javascript" src="jqSOAPClient.js"></script>
<script type="text/javascript">
(function($)
$(document).ready(function()
console.debug('ready');
$('.hiddenAsset').hide();
$('a.pop').bind('click', showDialog);
console.debug('ready - done');
);
var showDialog = function()
console.debug('show');
$('#dialog').dialog(
modal: true,
overlay:
backgroundColor: '#666',
opacity: '.3',
filter: 'alpha(opacity=30)'
,
width: '400px',
height: '300px',
buttons:
Ok: function()
$(this).dialog('close');
,
Cancel: function()
$(this).dialog('close');
);
console.debug('show-done');
return false;
;
)(jQuery);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：这与 jQuery 没有任何关系。这是 IE 6 中的一个已知错误 - Windows 原生选择框总是出现在其他元素之上。您唯一能做的就是在选择框被遮盖时隐藏它们 - 通常用看起来像选择框的东西替换它们。
【讨论】：
是的，我意识到了这一点。我一直在使用来自 cnet 的 mootools 和一个 ui 框架。当打开对话框时，ui 框架对 iframe 做了一些事情。 iframe 抑制了选择框。 你能用 iframe 覆盖一个选择框吗？这比用假选择框替换它更容易。不管怎样，这超出了我的经验。祝你好运！【参考方案2】：我最终找到了一个有用的插件 - bgiframe 奇怪的是它可以作为插件使用。为什么它没有集成在主 UI 中？！
试过了，但不幸的是，它搞砸了我的对话！对话框内容全部左移 30-40 像素 :-( 。下一个问题...
【讨论】：
以上是关于jQuery：IE6 中的窗口控件存在问题的主要内容，如果未能解决你的问题，请参考以下文章
基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+