输入选择下拉菜单在 Firefox 中不起作用

Question

我在 Firefox 浏览器中遇到输入选择下拉问题，但在 Google Chrome 中工作正常。

\n\n

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

\n\n

我需要你的帮助。

\n\n

这是我的html代码：

\n\n

<div class="layout_nemo" style="margin:0px auto; width:520px;">\n    <aside id="models">\n        <section class="nestingList" style="width:520px;">\n            <div style="float:right; width:100px; border:1px solid #f00; text-align:right"><a href="#" class="track-click">A5</a>\n            </div>\n            <div style="clear:both; margin:0px; padding:0px;"></div>\n            <div class="flyout" style="border:3px solid #000;">\n                <div class="inner">\n                    <div class="col" style="float:right;">\n                        <ul class="nav">\n                            <li><a href="#" class="track-click">A5 Coup\xc3\xa9</a>\n                            </li>\n                            <li><a href="#" class="track-click">A5 Sportback</a>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class="articles" style="float:left;">\n                        <article class="visuallyhidden">\n                            <select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">\n                                <option>option1</option>\n                                <option>option2</option>\n                                <option>option3</option>\n                                <option>option4</option>\n                            </select>\n                            <select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">\n                                <option>option5</option>\n                                <option>option6</option>\n                                <option>option7</option>\n                                <option>option8</option>\n                            </select>\n                        </article>\n                        <article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>\n                    </div>\n                </div>\n            </div>\n        </section>\n    </aside>\n</div>\n

\n\n

以及CSS代码：

\n\n

.visuallyhidden {\n    border:0;\n    clip:rect(0 0 0 0);\n    height:1px;\n    margin:-1px;\n    overflow:hidden;\n    padding:0;\n    position:absolute;\n    width:1px;\n}\n.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {\nclip:auto;\nheight:auto;\nmargin:0;\noverflow:visible;\nposition:static;\nwidth:auto;\n}\n.clearfix:after, .layout_nemo .nemo_carousel .pagination:after {\nclear:both;\n}\naside {\ndisplay:block;\n}\nnav ul, ul.nav {\npadding-bottom:0;\n}\n.flyout {\ndisplay:none;\nheight:auto;\noverflow:hidden;\nposition:absolute;\nz-index:9999;\n}\n.flyout nav#navigation .links a {\nfont-family:Verdana, Helvetica, sans-serif;\nline-height:20px;\nfont-weight:bold;\nbackground-position:0 -444px;\n}\n.flyout nav#navigation .links a:hover {\nbackground-position:0 -444px;\n}\n.flyout>.inner {\nposition:relative;\nmargin:-3px 3px 3px 3px;\n}\n#models {\nposition:absolute;\ntop:-124px;\n}\n#models.home {\ntop:-84px;\n}\n#models section {\ndisplay:inline;\nfloat:left;\n}\n#models .flyout {\nleft:-3px;\nwidth:520px;\n}\n#models .articles, #models .inner {\noverflow:hidden;\n}\n#models .inner {\nposition:relative;\npadding-top:20px;\nmin-height:280px;\n}\n#models .nav li {\nlist-style-image:none;\nlist-style-type:none;\nmargin-left:0;\n}\n#models .nav a {\ndisplay:block;\nheight:29px;\nline-height:29px;\npadding-left:9px;\nborder-top:1px solid #e7e9ea;\ntext-decoration:none;\nbackground:none;\n}\nbody.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 {\nfont-size:36px;\n}\n.layout_nemo #models {\ntop:23px;\n}\n.layout_nemo #models section>h1>a {\nmargin-left:0;\n}\n

\n\n

还与您分享一个链接\n我们尝试过的整个过程包括所有 js 文件。请在两个浏览器（firefox 和 chrome）中查看该链接

\n

Answer 1

主要在 Chrome 中进行开发总是会导致在其他浏览器中出现奇怪的行为，因此一个好的开始是在 Firefox 中进行开发。如果它在 Firefox 中运行 99%，那么它在其他地方也可以运行，在 IE 中也是如此。Chrome 有很多假设和“有用”的功能，让开发人员脱轨。

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