底线在前
有没有 CSS 方法可以解决这个问题？ 或者我是否必须破解我用来将动态下拉 div 移动到表单外部的 jquery 插件，执行 position:absolute，然后将其移回表单中？
(嗯，stackoverflow 上的这个“标签”字段看起来正是我需要的:-)
EDIT 修复了要验证的页面示例。抱歉，应该在提交问题之前完成此操作。
编辑 7 月 20 日:删除 z-index:0 的字段集 CSS 解决了 FireFox 的问题。我测试了http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ -- 将 DIV 附加到 html BODY 的末尾，它可以跨浏览器工作。
背景
带有几个带图例的字段集的简单形式。 CSS 没什么特别的:
label { float:left; width: 150px; }
input { float: left; width: 132px; }
fieldset { position:relative; }
注意 这意味着，在 HTML 中，我在每个输入标签后添加了一个带有 clear:left 的 BR 标签。
--> 表格看起来不错，一切都很好。
驱动目标
但是，中间的 1 个字段有太多数据(即所有主要的美国专利分类代码)。因此，这需要更有用。我在想……自动完成……保存匹配项，所以一个文本字段“标记”了匹配项……等等。
完美，这是一个足够普遍的需求。因此，我为标记化、多选、文本字段插件安装了一个 jquery 插件。只有少数几个可以进行多项选择，并具有自动完成功能。选择其中任何一个。我都试过了 :-)
所有人都倾向于执行一些 HTML 片段的 $(input).insertAfter() —— 通常是通过 Javascript 填充以包含 UI/LI 列表。
--> 还不错，还没有古怪。
问题
哦，我的天——图例、字段集、复选框，一切都在下拉 div/ul 内容中和之上。这不是 IE z-index 问题。
- position:absolute 将其混合在一起，不会像导航菜单、工具提示、css 弹出窗口等通常那样很好地放置
- position:relative 阻止它混搭，但是......好吧......它现在是相对的。因此，容器字段集向下延伸等。
- firebug、在 CSS 上修改 z-index/position 等都无法解决这个问题。
我是否必须破解插件才能在表单外插入 DIV 下拉代码片段？ (然后 position:absolute;z-index:999; top/left 向上移动回到表格中) 或者...有没有 CSS 解决方案？
引用资料:
-
CRUNCH 混合图例、复选框、字段集和下拉 div 的
- 屏幕截图(突出显示 CSS)位于 http://www.flickr.com/photos/turnerscraft/3733488100/
- Jquery Tokenizing AutoComplete Text 插件 http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/
- Relative Positioning 可以工作，但那不是 解决方案。参见 http://test.iplookout.com/search/
最佳答案
你实际上并没有在你的问题中提到这个，但你只是在 IE 中遇到了问题，对吧？因为我无法在任何其他浏览器中重现它。
答案很简单:
修复您的文档类型!
您当前的文档类型触发器 quirks mode因为它缺少系统标识符。因此，所有的赌注都落空了。将其更改为 HTML4 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
即使修复当前的文档类型也应该:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
或者更好的是，使用 HTML5 文档类型(因为文档类型唯一适用于触发标准模式，这是您需要这样做的最短文档类型):
<!DOCTYPE html>
关于css - Forms CSS ……这太荒谬了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1148723/