javascript 输入选择下拉菜单在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18557966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input select dropdown not working in firefox
提问by indy
I am facing a input select dropdown problem in Firefox browser but it works fine in Google Chrome.
我在 Firefox 浏览器中遇到输入选择下拉问题，但它在 Google Chrome 中运行良好。
I have created a jQuery submenu box. My problem is when I put content in the content area of the submenu, its ok. But when I am creating a select box in that content area its not working in Firefox but works fine chrome browser...I mean I can't select any option of that select box when I am trying to select option 2, option 3 etc, the whole thing got disappear.
我创建了一个 jQuery 子菜单框。我的问题是当我把内容放在子菜单的内容区域时，没问题。但是，当我在该内容区域中创建一个选择框时，它在 Firefox 中不起作用，但在 chrome 浏览器中运行良好……我的意思是，当我尝试选择选项 2、选项 3 等时，我无法选择该选择框的任何选项，整个事情就消失了。
I need your help regarding this.
我需要你的帮助。
Here is my htmlcode:
这是我的html代码：
<div class="layout_nemo" style="margin:0px auto; width:520px;">
<aside id="models">
<section class="nestingList" style="width:520px;">
<div style="float:right; width:100px; border:1px solid #f00; text-align:right"><a href="#" class="track-click">A5</a>
</div>
<div style="clear:both; margin:0px; padding:0px;"></div>
<div class="flyout" style="border:3px solid #000;">
<div class="inner">
<div class="col" style="float:right;">
<ul class="nav">
<li><a href="#" class="track-click">A5 Coupé</a>
</li>
<li><a href="#" class="track-click">A5 Sportback</a>
</li>
</ul>
</div>
<div class="articles" style="float:left;">
<article class="visuallyhidden">
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option5</option>
<option>option6</option>
<option>option7</option>
<option>option8</option>
</select>
</article>
<article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>
</div>
</div>
</div>
</section>
</aside>
</div>
And the CSScode:
和CSS代码：
.visuallyhidden {
border:0;
clip:rect(0 0 0 0);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip:auto;
height:auto;
margin:0;
overflow:visible;
position:static;
width:auto;
}
.clearfix:after, .layout_nemo .nemo_carousel .pagination:after {
clear:both;
}
aside {
display:block;
}
nav ul, ul.nav {
padding-bottom:0;
}
.flyout {
display:none;
height:auto;
overflow:hidden;
position:absolute;
z-index:9999;
}
.flyout nav#navigation .links a {
font-family:Verdana, Helvetica, sans-serif;
line-height:20px;
font-weight:bold;
background-position:0 -444px;
}
.flyout nav#navigation .links a:hover {
background-position:0 -444px;
}
.flyout>.inner {
position:relative;
margin:-3px 3px 3px 3px;
}
#models {
position:absolute;
top:-124px;
}
#models.home {
top:-84px;
}
#models section {
display:inline;
float:left;
}
#models .flyout {
left:-3px;
width:520px;
}
#models .articles, #models .inner {
overflow:hidden;
}
#models .inner {
position:relative;
padding-top:20px;
min-height:280px;
}
#models .nav li {
list-style-image:none;
list-style-type:none;
margin-left:0;
}
#models .nav a {
display:block;
height:29px;
line-height:29px;
padding-left:9px;
border-top:1px solid #e7e9ea;
text-decoration:none;
background:none;
}
body.special #main .content .mediaContainer, body.special #main .content .audi_flash_replace, body.special #main .content .flash_3col, body.special #main .content .con_flashfilm_3col, body.special #main .content body.special.detail .headline h1 {
font-size:36px;
}
.layout_nemo #models {
top:23px;
}
.layout_nemo #models section>h1>a {
margin-left:0;
}
Also sharing you a linkwhere we have tried the whole thing includes all the js files. Please have a look of that link in both browser (firefox & chrome)
还分享给你一个链接我们已经尝试了整个事情，包括所有的 js 文件。请在两个浏览器（firefox 和 chrome）中查看该链接
回答by Nemanja
Developing primarily in Chrome will always lead to strange behavior in other browsers, so a good start would be to do it in Firefox. If it works in Firefox 99% it will work everywhere else, in IE too. Chrome has a lot of assumptions and "helpful" features that derail developers.
主要在 Chrome 中开发总是会导致在其他浏览器中出现奇怪的行为，因此在 Firefox 中进行开发是一个好的开始。如果它在 Firefox 中 99% 都可以运行，那么它在其他任何地方都可以运行，在 IE 中也是如此。Chrome 有很多假设和“有用”的特性，让开发人员脱轨。
Also, my test in Firefox showed no errors. I am using 23.0.1.
此外，我在 Firefox 中的测试没有显示任何错误。我正在使用 23.0.1。
回答by Nemanja
I just refactored entire HTML code and started working on CSS. I've done this up to now I hope it helps, somewhat.
我只是重构了整个 HTML 代码并开始研究 CSS。到目前为止，我已经这样做了，希望它有所帮助。
<div class="layout_nemo">
<aside id="models">
<section class="nestingList">
<div id="new_url_top">
<a href="#" class="track-click">A5 series</a>
</div>
<div style="clear:both; margin:0px; padding:0px;"></div>
<div class="flyout" style="border:3px solid #000;">
<div class="inner">
<div class="col" style="float:right;">
<ul class="nav">
<li><a href="#" class="track-click">A5 Coupé</a></li>
<li><a href="#" class="track-click" >A5 Sportback</a></li>
</ul>
</div>
<div class="articles" style="float:left;">
<article class="visuallyhidden">
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option5</option>
<option>option6</option>
<option>option7</option>
<option>option8</option>
</select>
</article>
<article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>
</div>
</div>
</div>
</section>
</aside>
The effect and everything concerned around the dropdown is not happening inside HTML/CSS, and its not Firefox problem because of that. I thought you must have been using some external JavaScript to do this, and I was right.
效果和与下拉菜单相关的所有内容都不会在 HTML/CSS 中发生，因此它不是 Firefox 问题。我想你一定是使用了一些外部 JavaScript 来做到这一点，我是对的。
Problem is inside your js.jsfile, that you have included into external files for the jsFiddle example page. One part of the problem is that the file is combined with everything else and is part of something much bigger. I would really hate going into it after doing html/css.
问题出在您的js.js文件中，您已将其包含到 jsFiddle 示例页面的外部文件中。问题的一部分是该文件与其他所有内容结合在一起，并且是更大事物的一部分。在完成 html/css 之后，我真的很讨厌进入它。
So the part of jQuery that is making the problem is located around:
因此，导致问题的 jQuery 部分位于：
- line 4836
- line 4841
- line 4937
- line 4942
- line 5074
- 第 4836 行
- 第 4841 行
- 第 4937 行
- 第 4942 行
- 第 5074 行
If you can get that spaghetti code out and do something with it... Good luck.
如果你能得到那个意大利面代码并用它做点什么......祝你好运。
Someone posted a solution here Containing div loses focus when mousing over select dropdown
有人在这里发布了一个解决方案，当鼠标悬停在选择下拉菜单上时，包含 div 失去焦点
