IE10+ 选择元素选项列表未解释为父元素的子元素

Question

在IE 10和11中，<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开发人员有意为之的，那么有没有办法设置元素的样式，以便我的过渡仍然有效？

更新 12/10/14 - 在撰写本文时，我发现仅有的两个选择替换库实现了选项列表，使其成为选择父元素的子元素，它们是选择器和选择。最终选择了选择器。

Answer 1

在Internet Explorer中，我们实际上将下拉列表实现为一个单独的窗口。不过，我能够在IE 11中看到该问题，并且当然可以看到这是多么令人沮丧。好消息是，我们似乎已经解决了这个问题，并在 http://remote.modern.ie 上发布了代码(从Mac OS X或Windows运行(。

预计行为的更改将登陆IE的未来版本。