IE10 +选择元素选项列表不被解释为父元素的子元素 [英] IE10+ Select element options list not interpreted as a child of parent element
问题描述
在IE 10和11中，< select> 元素的呈现选项列表似乎不被视为其父元素的子元素，至少为就过渡而言。
In IE 10 and 11, a rendered options list of a <select> element doesn't seem to be considered a child of its parent element, at least as far as transitions are concerned.
假设我们有一个< div> ，它使用CSS过渡样式，在悬停时，它向右滑动100px然后悬停，它会向后滑动。
Assume we have a <div> that is styled using CSS transitions such that on hover, it slides right 100px and off hover, it slides back.
如果我们添加< select> < div> 内的元素，它仍会在悬停时向右滑动。但是，如果我点击< select> 并将鼠标悬停在< option>的列表中， < div> 滑回原来的位置，好像我已将光标移到< div> 之外而不是保持过渡。我可以想到的唯一解释是，不知何故，IE正在将选择列表或选项本身解释为在父元素之外。
If we add a <select> element inside the <div>, it still slides right on hover. However, if I click the <select> and hover inside the list of <option>'s, the <div> slides back into its original position as if I've moved the cursor outside the <div>, rather than staying transitioned. The only explanation for this I can come up with is that somehow, IE is interpreting the select list or the options themselves as being outside of the parent element.
此片段显示它是如何发挥作用的。在Chrome / FF / Safari和IE10 +中试用。
This snippet shows how it plays out. Try it in Chrome/FF/Safari vs 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中尝试了相同的示例，我得到了预期的行为 - 即使我的光标位于
I've tried this same example in Chrome, Firefox, and Safari and I get the expected behavior - the <div> stays transitioned even when my cursor is on the <select> list. I only see it slide back in IE and I'm thinking it's a browser bug.
如果IE的开发人员有点故意这样做，是否有一些方法可以调整元素的样式，使我的转换仍然有效？
If this is somehow intentional by the developers of IE, is there some way to style the elements such that my transition still works?
UPDATE 12/10/14 - 在撰写本文时，我发现只有两个选择的替换库实现了选项列表，使得它是select的父元素的子元素是 Selecter 和选择。结束了Selecter。
UPDATE 12/10/14 - At the time of writing, the only two select replacement libraries I found that implement the options list such that it is a child element of the select's parent are Selecter and Chosen. Ended up going with Selecter.
推荐答案
在Internet Explorer中，我们实际上将下拉列表实现为单独的窗口。我能够在IE 11中看到问题，并且可以肯定地看到这是令人沮丧的。好消息是我们已经解决了这个问题，并将代码发布在 http://remote.modern.ie （从Mac OS X或Windows运行）。
In Internet Explorer we actually implement the dropdown list as a separate window. I am able to see the issue in IE 11 though, and can certainly see how that is frustrating. The good news is it appears we have already addressed this, and shipped the code on http://remote.modern.ie (run from Mac OS X, or Windows).
预计IE未来构建中的行为发生变化。
Expect the change in behavior to land in a future build of IE.
这篇关于IE10 +选择元素选项列表不被解释为父元素的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
