IE10 + Select元素選項列表未被解釋爲父元素的子元素

在IE 10和11中，<select>元素的渲染選項列表似乎不被視爲其父元素的子元素，至少就轉換而言擔心。IE10 + Select元素選項列表未被解釋爲父元素的子元素

假設我們有一個使用CSS轉換樣式的<div>，這樣在懸停時，它會滑動100px並關閉懸停，然後滑回。

如果我們在<div>內添加一個<select>元素，它仍然會在懸停時滑動。但是，如果我點擊<select>並將其懸停在<option>'s列表中，則<div>會滑回原始位置，就好像我已將光標移至<div>之外，而不是保持轉換狀態。對此我唯一的解釋是，不知何故，IE會將選擇列表或選項本身解釋爲在父元素之外。

這段代碼展示了它是如何發揮出來的。在Chrome/FF/Safari和IE10 +中試用。

.test { 
 
    position: absolute; 
 
    left: 0; 
 
    transition: left 1s; 
 
    padding: 20px; 
 
    border: 1px solid red; 
 
} 
 

 
.test:hover { 
 
    left: 100px; 
 
}

<div class="test"> 
 
    Move me 
 
    <select> 
 
     <option>Test</option> 
 
     <option>Test</option> 
 
     <option>Test</option> 
 
     <option>Test</option> 
 
     <option>Test</option> 
 
     <option>Test</option> 
 
    </select> 
 
</div>

我試着在Chrome，Firefox和Safari同樣的例子，我得到預期的行爲 - 當我的光標是<select>名單上的<div>撐甚至轉變。我只看到它在IE中滑回，我認爲這是一個瀏覽器錯誤。

如果這是IE的開發者的某種故意，是否有某種方式來設計元素，以便我的轉換仍然有效？

UPDATE 12/10/14 - 在編寫本文時，我發現實現選項列表的唯一兩個選擇替換庫是選擇父項的子元素，它們是Selecter和Chosen。結束了Selecter。

來源

2014-12-02 thewildpendulum

在Chrome中，還有一些奇怪的行爲：如果您在左側打開選擇並將鼠標移出，則該div將移動，但選項將保留在相同的位置。將鼠標移到它們上面不會讓div滑動，所以看起來Chrome並不認爲它們是父div的「孩子」（或者只有在某些情況下）。 – 2014-12-02 22:03:44

^同樣適用於Safari – 2014-12-02 22:07:23

這很奇怪。幸運的是，我不需要擔心在過渡期間顯示選項。這不是理想的行爲，但如果它在瀏覽器中是一致的，那麼我可以忍受這一點。 – thewildpendulum 2014-12-10 17:32:11

在Internet Explorer中，我們實際實現的下拉列表爲單獨的窗口。不過，我能夠在IE 11中看到這個問題，並且可以肯定地看到這是令人沮喪的。好消息是，我們已經解決了這個問題，並將代碼發送到http://remote.modern.ie（從Mac OS X或Windows運行）。

預計在未來的IE版本中將出現行爲變化。

來源

2014-12-02 22:06:29 Sampson

感謝您的解釋！任何想法如何我可以在IE10上處理這個？我認爲這些補丁只適用於最新版本。 – thewildpendulum 2014-12-02 23:26:10

@thewildpendulum您最好的選擇（即使我們修補IE 10）將使用第三方解決方案，例如[jQuery UI的選擇菜單]（http://jqueryui.com/selectmenu/）。這可以讓你啓動並運行*今天*。 – Sampson 2014-12-02 23:59:24

我擔心你會這麼說。雖然，非常有幫助。謝謝，@Jonathon！ – thewildpendulum 2014-12-03 05:19:31

IE10 + Select元素選項列表未被解釋爲父元素的子元素

回答

相關問題