Javascript 如何在IE11/Windows8中删除样式选择上不需要的填充

选择隐藏在文本后面，不透明度为0，单击即可正常打开。我的问题是，在Windows 8上的IE11中，选项在列表的顶部和底部都有不必要的填充：

填充来自已更改的选择高度。但是我需要它和文本一样大才能通过单击打开它。我不认为有任何机会降低select的高度并用Javascript打开它

运行示例：

div{
线高：50px；
字体大小：30px；
位置：相对位置；
宽度：300px；
}
挑选{
-webkit外观：无；
-moz外观：无；
外观：无；
显示：块；
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
不透明度：0；
}

洛勒姆
乱数假文
多洛
坐着
艾米特
打开选择

请尝试为第一个选项设置所选的

选择1
选择2
选择3

尝试在顶部0像素处添加填充。我不使用ie11，但这可能会有所帮助

select {
 -webkit-appearance: none;
  -moz-appearance: none;
  padding-top:0px;
  appearance: none;
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  opacity: 0;
}

---

我用一些JS魔法自己修复了它：

现在，select的大小不会因CSS而增加。而是绑定到元素上的鼠标移动。因此，选项列表中的填充很好，并且通过单击样式范围上的所有位置来打开选择

我添加了一个示例（绿色的），您可以在其中看到背后的技术

移动鼠标的函数（事件）{ var$div=$（本）； var divOffset=$div.offset（）； var$select=$（this.find（'select'）； var relX=event.pageX-divOffset.left； var relen=event.pageY-divOffset.top； $select.css（'top'，relY-5）； 如果( 依靠>$div.height（）|| relX>$div.width（）|| 依赖<0|| relX<0 ) { $select.css（'top'，'auto'）； } } 函数onSelectClick（事件）{ if（$（event.target）.is（'select'）==false）{ 返回； } $（this.addClass（'select-open'）； } 函数onSelectBlur（）{ $（this.parent（）.removeClass（'select-open'）； } 函数onSelectChange（）{ $（this.parent（）.removeClass（'select-open'）； } 函数onBodyClick（事件）{ if（$（event.target）.is（'select'））{ 返回； } $（'div.select-open'）.removeClass（'select-open'）； } $（“正文”） .on（'mousemove'，'div:not（.select open'），onMouseMove） .on（'click'，'div:not（.select open）select'，onselect click） .on（'change'、'select'，onSelectChange） .on（'blur'，'select'，onSelectBlur） ;

div{
字体大小：30px；
位置：相对位置；
宽度：300px；
边缘底部：30px；
}
跨度{
显示：块；
边框底部：1px纯黑；
宽度：100%；
线高：35px；
}
挑选{
-webkit外观：无；
-moz外观：无；
外观：无；
显示：块；
宽度：100%；
位置：绝对位置；
排名：0；
不透明度：0；
填充：0；
}
.可视技术{
背景：绿色；
}
.可见技术选择{
不透明度：1；
}

洛勒姆
乱数假文
多洛
坐着
艾米特
打开选择
洛勒姆
乱数假文
多洛
坐着
艾米特
打开选择

您仍然可以使用

：active

状态。示例使用

填充

：

select {
  padding: 10px 0;
}

select:active {
  padding: 0;
}

---

这可能需要对select元素进行一些严格的定位，以便它在收缩和激活时不会移动，但这应该没有问题。

也许您只需要像这样重置CSS：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

---

把它放在其他的上面（或者先叫它）。它将给你一个新的托盘，不会与你的下一个代码冲突。每个浏览器都有自己的首选项，所以最好（如果您只是想）在开始时有一个类似于零的东西，而不需要再做一些/很多“魔术”。

Select是一个由浏览器呈现的html元素。如果您不喜欢浏览器提供的选择组件，您可以使用html、css和javascript设计自己的下拉组件

就像Telerik做的那样

div{
线高：50px；
字体大小：30px；
位置：相对位置；
宽度：300px；
}
挑选{
/*变化*/
填充底部：0；
填充顶部：0；
-webkit外观：无；
-moz外观：无；
外观：无；
显示：块；
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
不透明度：0；
}

洛勒姆
乱数假文
多洛
坐着
艾米特
打开选择

因为我以前遇到过这个问题

在这里，我找到了Jerreck发布的关于这个问题的很好的参考链接

这个额外的空白是由浏览器的渲染引擎添加的。表单元素呈现在不同浏览器中不一致，在这种情况下不是由CSS决定的。请看Mozilla的这篇文章，其中解释了一些缓解选择框不一致性的方法，然后您可能会阅读Smashing杂志中关于表单元素样式的这篇文章（一定要查看评论和人们对选择的问题）

因此，我建议您可以使用任何第三方小部件来选择选项，以提高选择选项组件的UI一致性。这是我个人的意见。您可以找到小部件和插件。

注意：此填充的一个有趣的事实是，仅当您指定的高度大于浏览器（IE）指定的默认高度时，才会显示此空白填充。如果您不指定，则不会在顶部和底部添加填充

例如：：如果您给出“60px”的高度，那么这些填充在顶部为30px，在底部为30px，我已经标记了这只是将标签文本放入其中。

---

问题在于选择元素的高度。 选项列表的第一个选项与IE11中可见的选择文本重叠。选择框的高度会生成一个“填充”，因为选择框文本是垂直中对齐的

如果在选择框处于活动状态时删除高度，则不应再添加填充

select:active, select:focus {
    height: auto;
}

编辑： 在Win8中，sel