Question

我在Firefox浏览器中遇到输入选择下拉列表问题但在谷歌浏览器中工作正常。

我创建了一个jQuery子菜单框。我的问题是当我将内容放在子菜单的内容区域时，没问题。但是，当我在该内容区域中创建一个选择框时，它在Firefox中不起作用但工作正常的Chrome浏览器......我的意思是当我尝试选择选项2，选项3等时，我无法选择该选择框的任何选项，整件事情都消失了。

我需要你的帮助。

这是我的 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>

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;
}

还与您分享link 我们尝试了整个事情，包括所有的js文件。请在两个浏览器中查看该链接（firefox＆amp; chrome）

Answer 1

主要在Chrome中进行开发会导致其他浏览器出现奇怪的行为，因此一个良好的开端就是在Firefox中进行。如果它在Firefox 99％中工作，它将在IE中的其他任何地方工作。 Chrome有很多假设，而且很有帮助＃34;破坏开发人员的功能。

另外，我在Firefox中的测试显示没有错误。我使用的是23.0.1。

Answer 2

我刚刚重构了整个HTML代码并开始研究CSS。到目前为止，我已经做到了这一点，我希望它有所帮助。

http://jsfiddle.net/cgRA2/19/

<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>

关于下拉列表的效果和所有相关内容都没有在HTML / CSS中发生，因此它不是Firefox的问题。我认为你必须使用一些外部JavaScript才能做到这一点，我是对的。

问题出在您的 js.js 文件中，您已将其包含在jsFiddle示例页面的外部文件中。问题的一部分是该文件与其他所有内容相结合，并且是更大的内容的一部分。在做html / css之后，我真的很讨厌进入它。

因此，问题的jQuery部分位于：

第4836行
第4841行
第4937行
4942行
第5074行

如果你能得到意大利面条代码，并用它做点什么......祝你好运。

有人在此处发布了解决方案Containing div loses focus when mousing over select dropdown

Answer 3

2021 年 7 月 14 日

最近遇到 Firefox 无法呈现 HTML 的问题的任何人，尤其是 <select> 元素，请参见下文：

我管理 Grails 网络应用程序已经很多年了，前几天我遇到了这个问题，我的网站在所有浏览器中都运行良好，但无论出于什么奇怪的原因，Firefox 根本不会 em> 在其分配的 <select>

中呈现 <div> 标签

在对浏览器进行大量测试并使用 Firebug 控制台/检查之后，我将其追溯到旧的 HTML 4.0 Doctype 定义。

一旦我将我的网站更新为 HTML 5 标准文档类型，Firefox 就会顺从并完美呈现所有内容。

修正：

更改旧文档类型： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

到新文档类型： <!DOCTYPE html>

我知道这比最初的问题帖子晚了几年，但我真的很感激能偶然发现这个答案。

我希望它可以帮助那里的人。

输入选择下拉列表在Firefox中不起作用

3 个答案: