如何强制下拉列表在IE 11上向下移动？

Question

我有以下下拉列表：

<select>
  <option></option>
  <option>Closed</option>
  <option>Open</option>
</select>

与相关的风格：

select {
  font-family: Cursive;
  width:200px;
  position: relative;
  z-index: 100;  
  padding-right: 25px;
} 

我的问题是IE 11上的下拉列表正在向上移动：

在Chrome上它的工作正常。 有什么想法吗？

Answer 1

如评论中所述，选择菜单非常符合浏览器且难以设计风格。有些人甚至将选项发送到暮光区域，它们看起来甚至不是窗口的一部分，任何事件都将返回null。可能不值得尝试让它在浏览器中看起来相同，也是因为移动实现，但我碰巧在没有明显原因的情况下制作这样的东西。因为它与你的问题一致，我也可以发布它。

对于HTML和CSS来说，它不是最漂亮的东西，因为它需要四个额外的元素 - 一个包装器（通常用于样式选择具有溢出隐藏的框但是我采用了略微不同的方法，因为我认为它看起来更好）和三个绝对放置的元素。一个是样式按钮，另一个是隐藏出现的滚动条，第三个是小黑客。

最重要的是用户将无法单击选择菜单本身。当这种情况发生时，大多数都会丢失，因为在此之后它就会陷入困境。为此，将使用第三个元素。它将被放在选择框的顶部。然后，当它被点击时，不是直接打开菜单，而是通过改变select元素的大小来伪造它。覆盖右侧的div也有另一个目的。它最初放在底部，通过它的偏移，我们知道盒子的高度。这将用于调整按钮的大小并为重叠div设置正确的大小。

在所有主要的Windows桌面浏览器上看起来表现得非常可预测。对于移动方面的影响，此脚本使用触​​摸支持功能测试，如果是这种情况，则恢复为正常布局。可能会进行调整（使用屏幕尺寸检查）以排除触控板用户。

Demo

没有太多相关的CSS。但重要的是设置身体背景与右侧的栏相同。使用透明度，因此在按钮图像加载之前，实际菜单不可见。

$(function() {

var hub = $('#box'), list = $('select'),
impel = $('#open'), commit = $('#mark'), tract = $('#refer'),
zenith = tract.position().top,
extent = list.children().length, active;

if (touch()) {
impel.add(commit).add(tract).remove();
hub.fadeTo(0,1);
return;
}

impel.add(commit).height(zenith);
tract.addClass('bar');

hub.fadeTo(0,1).on('mouseup click', function(e) {

    e.stopPropagation();
});

commit.mouseup(function() {

    flip();
    show();
    active = true;
});

list.add(impel).click(function() {

    flip();
    active = !active;
    if (active) show();
    else hide();
});

$(window).click(function() {

    if (active) {
    flip();
    hide();
    active = false;
    }
});

function show() {list.attr('size', extent)}

function hide() {list.removeAttr('size')}

function flip() {commit.toggle()}

function touch() {

    return 'ontouchstart' in window
    || navigator.maxTouchPoints > 0
    || navigator.msMaxTouchPoints > 0;
}
});