下拉宽度在IE 11中自动增加 [英] Drop Down width increases automatically in IE 11
问题描述
我旁边有一个下拉列表和一个文本框.当我首先在文本框中单击而不输入任何字母，然后在下拉菜单上单击时(您的直接单击应该仅在下拉菜单上，而不是在表单上的其他位置).此时，我可以看到下拉菜单的宽度增加了，并且将文本框悬停了.我需要避免这样做，并保持下拉菜单的宽度相同.仅在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>
注意:当我从文本中删除占位符时，我没有发现此问题.关于如何保持下拉菜单的宽度相同，是否有任何解决方法?在不删除文本框的占位符的情况下，先单击文本框，然后单击下拉列表后，该怎么办?
此 meeebee ，
添加onmousedown属性，并将其集中在选择下拉列表上，以使它从输入框中失去焦点.出于某种原因，在访问选择内容之前，请先专注于输入，从而导致此错误.
<select onmousedown="$(this).focus()">
I have a drop down list and text box placed next to it. When I click first on text box without typing any letters and next click on drop down(Your immediate click should be only on drop down not else where on the form). At this time I could see the width of the drop down gets increased and hovers the text box. I need to avoid doing this and maintain the same width of the drop down. This issue is happening only in IE 11
Here is my code
<!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>
NOTE: when I remove the place holder form the text I don't find this issue. Is there any work around on how I can maintain the same width of the drop down. After clicking first on text box and next on drop down list without removing the place holder for the text box?
The answer in this post solved this problem for me. Quoting meeebee,
Add the onmousedown attribute and have it focus on the select dropdown so that it loses focus from the input box. For some reason focus on the input before accessing that select causes this error.
<select onmousedown="$(this).focus()">
这篇关于下拉宽度在IE 11中自动增加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
