Question

我旁边有一个下拉列表和文本框。当我首先单击文本框而不键入任何字母，然后单击下拉列表（您的立即点击应该只是下拉而不是表格上的其他位置）。这时我可以看到下拉的宽度增加并悬停在文本框中。我需要避免这样做，并保持相同的下拉宽度。此问题仅在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>

注意：当我从文本中删除占位符时，我不会发现此问题。有关如何保持下拉宽度相同的问题吗？首先单击文本框，然后单击下拉列表，而不删除文本框的占位符？

Answer 1

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

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

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

Answer 2

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

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

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

IE 11中的下拉宽度自动增加

2 个答案: