Question

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

假设我们有一个使用CSS过渡样式的<div>，这样在悬停时，它会向右滑动100px并在悬停时滑动，然后向后滑动。

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

此代码段显示了它的效果。在Chrome / FF / Safari和IE10 +中试用。

＆＃13;

<div>

＆＃13;

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

＆＃13;

我在Chrome，Firefox和Safari中尝试过相同的示例，我得到了预期的行为 - 即使我的光标位于<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>列表中，<div>也会保持转换状态。我只看到它在IE中滑回，我认为这是一个浏览器错误。

如果IE的开发人员有某种意图，有什么方法可以调整元素的样式，以便我的过渡仍然有效吗？

更新12/10/14 - 在撰写本文时，我发现只有两个选择的替换库实现了选项列表，使得它是select的父级的子元素Selecter和Chosen。结束了Selecter。

Answer 1

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

预计IE未来构建中的行为会发生变化。

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

1 个答案: