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

Question

在 IE 10 和 11 中，<select> 元素的呈现选项列表似乎不被视为其父元素的子元素，至少就转换而言。

假设我们有一个<div>，它使用 CSS 过渡设置样式，这样在悬停时它向右滑动 100 像素，在悬停时它向后滑动。

如果我们在<div> 中添加<select> 元素，它仍然会在悬停时向右滑动。但是，如果我单击<select> 并将鼠标悬停在<option>'s 列表内，<div> 会滑回其原始位置，就好像我已将光标移到<div> 之外，而不是保持过渡状态。我能想到的唯一解释是，不知何故，IE 将选择列表或选项本身解释为在父元素之外。

这个 sn-p 显示了它是如何发挥作用的。在 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 的开发人员有意为之，是否有某种方法可以设置元素样式以使我的转换仍然有效？

2014 年 12 月 10 日更新 - 在撰写本文时，我发现实现选项列表的仅有的两个选择替换库是 Selecter 和 Chosen。最终选择了 Selecter。

Answer 1

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

预计行为的变化会在未来的 IE 版本中出现。