在 IE 11 中下拉宽度自动增加答案

【问题标题】：Drop Down width increases automatically in IE 11在 IE 11 中下拉宽度自动增加
【发布时间】：2015-06-19 20:11:31
【问题描述】：

我有一个下拉列表和文本框放在它旁边。当我在不输入任何字母的情况下首先单击文本框，然后单击下拉菜单时（您的立即单击应该只在下拉菜单上，而不是表单上的其他位置）。此时我可以看到下拉菜单的宽度增加并悬停在文本框上。我需要避免这样做并保持下拉的相同宽度。此问题仅在 IE 11 中发生

这是我的代码

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
});
</script>
</head>
<body>


<select name="SearchScope" title="Search Scope" id="idSearchScope" style="width: 200px !important">
    <option value="/locator.aspx?name=Common.Search.Global.MainPage">All of these words</option>
    <option value="/locator.aspx?name=Common.Search.Global.MainPage">Any of these words</option>
</select>
<input type="text" style="width: 200px" value="" placeholder="Enter text to search"><br><br>

</body>
</html>

注意：当我从文本中删除占位符时，我没有发现这个问题。是否有任何解决方法可以保持下拉的相同宽度。在第一次单击文本框和下一个下拉列表后没有删除文本框的占位符？

【问题讨论】：

标签： javascript jquery css asp.net html

【解决方案1】：

post 中的答案为我解决了这个问题。引用meeebee，

添加 onmousedown 属性并将其焦点放在选择下拉列表上，使其失去输入框的焦点。出于某种原因，在访问该选择之前关注输入会导致此错误。

<select onmousedown="$(this).focus()">

【讨论】：

【解决方案2】：

在</head>之前添加这个CSS代码：

<style> 
    #idSearchScope option{ width: 200px !important; }
</style>

这是因为你想控制选项的宽度。

【讨论】：

请解释否决票，以便我查看或编辑我的答案。
CSS 规则没有引号和样式等。 { style="width: 200px !important" } -> { width: 200px !important; }
哇哦，我没看到！！！！！！ ...谢谢，现在要编辑！好的，完成！