形成CSS ......这太荒谬了

Question

底线排在前面

有没有CSS方法来解决这个问题？或者我将不得不破解这个jquery插件我用来将动态下拉列表移动到表单的OUTSIDE,做一个位置:绝对,然后在表单中将其移回？

(嗯,这个在stackoverflow上的'tags'字段看起来就像我需要的东西:-)

编辑修复了要验证的页面示例.对不起,在提交问题之前应该这样做.

编辑 7月20日:删除z-index的字段集CSS:0为FireFox解决它.我测试了 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ - 它将DIV附加到html BODY的末尾,它可以跨浏览器工作.

背景

简单的形式与几个字段集w /传说.CSS没什么特别的:

label { float:left; width: 150px; }
input { float: left; width: 132px; }
fieldset { position:relative; }

请注意 ,这意味着,在HTML中,我做了一个带有clear的BR-tag:在每个输入标签之后留下.

- >表格看起来不错,一切都很好.

驾驶目标

但是,中间的一个领域有太多的数据(即所有主要的美国专利分类代码).因此,这需要更多可用.我在想...自动完成...保存匹配,所以一个文本字段"标记"匹配......等等.

完美,这是一个很普遍的需求.所以,我打了一个jquery插件,用于标记化,多选择,文本字段插件.只有少数人使用自动完成功能进行多项选择.选择其中任何一个.我已经尝试了所有这些:-)

所有人都倾向于使用某些HTML片段的$(输入).insertAfter() - 通常是通过Javascript填充以包含UI/LI列表.

- >还不错,还没有古怪.

问题

哦,我的上帝 - 传说,字段集,复选框,一切都在下拉div/ul内容中编织自己.这不是 IE z索引问题.

我是否必须破解插件才能在表单外部插入DIV下拉列表？(然后位置:绝对; z-index:999;顶部/左侧向上移回形式)或者......是否有CSS解决方案？

参考文献:

截图(突出显示CSS)的CRUNCH混合图例,复选框,字段集和下拉div在 http://www.flickr.com/photos/turnerscraft/3733488100/
Jquery Tokenizing AutoComplete Text插件 http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/
相对定位可以工作,但那不是解决方案.见http://test.iplookout.com/search/

Answer 1

你没有在你的问题中提到这一点,但你只是在IE中遇到问题,对吧？因为我无法在任何其他浏览器中重现它.

答案很简单:

修复你的doctype!

您当前的doctype会触发quirks模式,因为它缺少系统标识符.因此,所有赌注都没有了.将其更改为HTML4严格:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

即使修复您当前的doctype也应该:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

或者更好的是,使用HTML5 doctype(因为doctypes唯一有用的是触发标准模式,这是你需要做的最短的doctype):

<!DOCTYPE html>