形式CSS ......這事變得荒唐

是否有一個CSS的方法來解決這個問題？或者我將不得不破解我使用的這個jquery插件將動態下拉div移動到窗體的外部，做一個位置：絕對位置，然後將它移回窗體中？

（嗯這個「標籤」在計算器領域的樣子正是我需要的:-)

編輯固定的頁面實例驗證。對不起，提交問題之前應該做到這一點。

編輯 7月20日：針對z-索引中刪除字段集CSS：0解決它爲Firefox。我測試了http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ - 它將DIV附加到HTML BODY的末尾，它可以跨瀏覽器使用。

背景

簡單的形式，與一對夫婦的fieldsets W /傳說。 CSS是沒有任何幻想：

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

注意這意味着，在HTML，我做了BR標籤W/A明確：每個輸入標籤後離開。

- >表單看起來不錯，所有的都很好。

駕駛目標

但是，在中間有太多的數據（即所有主要的美國專利分類碼）1場。因此，這需要更多可用。我在想...自動完成...保存匹配，所以文本字段「標記」匹配...等。

完美，這是一個普遍的需要。所以，我打了一個jQuery插件，用於標記化，多選，文本字段插件。只有少數人使用自動完成功能進行多項選擇。選擇他們中的任何一個。我試過了他們所有的:-)

所有傾向於做一些HTML片段的$（input）.insertAfter（） - 通常是通過Javascript填充以包含UI/LI列表。

- >還是不錯，沒有古怪。

問題

哦，我的上帝 - 傳說，字段集，複選框，所做的一切頂編織本身在&下拉DIV/UL內容。這是不是一個IE z-index的問題。

的位置是：絕對的醪液這件事並不會很好滴像一個導航菜單，工具提示，CSS彈出或如通常做
位置：它混搭相對停止，但是......嗯......它的親戚現在。所以，容器字段集合等等。
螢火蟲，z-index /位置上的垃圾等CSS上只是不會解決這個問題。

我是否必須破解插件才能在表單外插入DIV下拉片段？（然後位置：絕對; Z-索引：999;頂部/左移回到表格中）或...是否有CSS解決方案？

參考文獻：

截圖（與突出CSS）的CRUNCH混合傳說，複選框，字段集和下拉格在 http://www.flickr.com/photos/turnerscraft/3733488100/
jQuery的符號化記憶式鍵入文本插件 http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/
相對定位可以工作，但那不是一個解決方案。請參見http://test.iplookout.com/search/

來源

2009-07-18 joej

請問您能提供一個類似於「相對定位鏈接」的鏈接嗎？可能OneNerd給出了正確的答案。但只有截圖很難說。 – 2009-07-18 23:04:43

發佈的鏈接（http://test.iplookout.com/search/）是位置：相對工作。它的工作原理，但只是因爲它避免了這個問題 - 沒有解決它。在「美國分類」字段中，輸入一些分類選項（礦物質，分鐘，音樂，器械，應用程序） - div不會覆蓋其他字段元素。它推倒了他們。這是我可以做的最好的只有改變這個插件的CSS。 – joej 2009-07-19 00:34:21

http://test.iplookout.com/search/現在位置：絕對有效的HTML。 – joej 2009-07-19 16:45:24

行 - 我找到了答案。

有沒有純CSS的解決方案（即我能找到），允許現有的jQuery插件的下拉列表中的所有表單元素正確懸停。

經驗教訓：如果他們沒有正確地製作標記...沒有什麼可以做的。

這裏是我做的，從http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/

編輯修復令牌化Autocomplet文本輸入插件（jQuery的）的jquery.tokeninput.js文件：

修改它最初如何插入DIV
- 查找在其中創建下拉列表的地方（VAR下拉= ...）
- 更換其.insertAfter（token_list）與.appendTo（document.body的）
- 這保證了標記不處於正常形式/ HTML流
- 執行此操作，其中代碼初始化並插入動態「」其將要使用
改變其位置時，它顯示了DIV
- 需要確保它把DIV 不在底部，但在輸入字段
- 所以，在show_dropdown_searching（）函數，釘這些到C的字符串所有關於下拉變量（見下文）。在.show（）調用之前執行此操作。

。

.css("position", "absolute") 
.css("top", $(token_list).offset().top + $(token_list).height()) 
.css("left", $(token_list).offset().left)

來源

2009-07-21 03:44:58 joej

似乎是z-index問題。嘗試增加爲自動填充顯示的div的z-index。

來源

2009-07-18 22:16:34

請閱讀我的帖子。我已經添加了「position：relative; z-index：1」（0,1,99999和所有其他大的索引值）。我試過的位置：絕對我已經將「position：relative; z-index：0」（和-1，oops）添加到其他字段元素。所有無濟於事。 – joej 2009-07-19 00:29:00

這是很多要跟隨，但想知道如果您嘗試將項目放在一個<div>標記，然後您可以分配樣式信息到div（如高度和溢出）？

進一步檢查你的屏幕截圖 - 是一個div與可能的項目出現 - 是什麼問題是？它沒有出現在其他表單元素之上？我不確定我是否完全理解，但基於屏幕截圖，看起來您可能可以調整zindex，或者該div的透明度使其完全不透明）。

來源

2009-07-18 22:17:21 OneNerd

是核心問題= div不在其他表單元素之上：fieldset，legend，checkbox，label等 – joej 2009-07-19 00:30:09

只是出於興趣，你有沒有嘗試過使用清除：浮標後的CSS標籤，看看這是否有任何影響？例如。 <br style="clear:both" />。

來源

2009-07-18 22:55:55

你實際上沒有在你的問題中提到這一點，但你只在IE中遇到問題，對吧？因爲我無法在任何其他瀏覽器中重現它。

答案很簡單：

修正你的DOCTYPE！

您當前的文檔類型觸發quirks mode，因爲它缺少系統標識符。因此，所有投注都關閉。將其更改爲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（因爲唯一的文檔類型有利於被觸發的標準模式，這是你需要做的最短文檔類型）：

<!DOCTYPE html>

來源

2009-07-19 02:06:26 mercator

你使用的是什麼版本的IE？這是IE6中的一個已知問題。

在IE6中，選擇是windowed objects這意味着它們存在於頁面上所有其他無窗口元素之上的平面上。 IE6中的Select元素不支持z-index and other properties。

我可靠地解決了這個問題的唯一方法是當select被其他元素覆蓋時，隱藏select爲'display：none'的選擇。評論

刪除的z-index後

編輯：在base_new.css（線251）從form#newsearch div.fs, form#newsearch fieldset 0將修復它在FF

來源

2009-07-19 11:53:42 Emily

形式CSS ......這事變得荒唐

回答

相關問題