javascript - Input select dropdown not working in firefox - Stack Overflow

admin管理员组

文章数量:1302871

I am facing a input select dropdown problem in Firefox browser but it works fine in 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.

I need your help regarding this.

Here is my html code:

<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 CSS code:

.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 link where we have tried the whole thing includes all the js files. Please have a look of that link in both browser (firefox & chrome)

I am facing a input select dropdown problem in Firefox browser but it works fine in 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.

I need your help regarding this.

Here is my html code:

<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 CSS code:

.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 link where we have tried the whole thing includes all the js files. Please have a look of that link in both browser (firefox & chrome)

• javascript
• jquery
• html
• css
• firefox

Share Follow edited Sep 1, 2013 at 20:17 indy asked Sep 1, 2013 at 11:27 indyindy 12911 gold badge22 silver badges1111 bronze badges 15

• Looks like a Firefox specific bug, where drop down items are not part of their parent element so the onmouseout is triggered. :/ – Shadow Wizzard Commented Sep 1, 2013 at 13:21
• @ShadowWizard Is there any other way to sort it out like adding some jquery fucntion or something?I really need this to be sorted out :) – indy Commented Sep 1, 2013 at 16:21
• Only thing I can think of is using custom drop down, which use "regular" elements to mimic drop down list. – Shadow Wizzard Commented Sep 1, 2013 at 18:10
• @ShadowWizard Can you show it in an example? It will be really helpful for me :) – indy Commented Sep 1, 2013 at 18:27
• 1 @ShadowWizard I am feeling the same..Actually this whole code is a very small part of a big project. So my options are like very limited. I just can't start from scratch. I have to go along with all the given CSS and JS. Or else making a standard dropdown won't be much difficult for me..If I can't do this with the given CSS and JS then I might give up the whole issue. Nevertheless thank you again for your effort and time :) – indy Commented Sep 1, 2013 at 20:33

 |  Show 10 more ments

3 Answers 3

Sorted by: Reset to default 2

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.

Also, my test in Firefox showed no errors. I am using 23.0.1.

I just refactored entire HTML code and started working on CSS. I've done this up to now I hope it helps, somewhat.

http://jsfiddle/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>

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.

Problem is inside your js.js file, that you have included into external files for the jsFiddle example page. One part of the problem is that the file is bined with everything else and is part of something much bigger. I would really hate going into it after doing html/css.

So the part of jQuery that is making the problem is located around:

• line 4836
• line 4841
• line 4937
• line 4942
• line 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

July 14, 2021

Anyone experiencing recent issues with Firefox not rendering HTML, in particular the <select> element correctly see below:

I have been managing a Grails web application for a number of years and came across this issue just the other day, where my site worked fine in all browsers, but for whatever strange reason, Firefox simply would not render the <select> tags in their allocated <div>

Following a lot of testing across the browsers and using Firebug console/inspection, I tracked it down to an old HTML 4.0 Doctype definition.

As soon as I updated my site to the HTML 5 standard doctype, Firefox fell into line and rendered everything perfectly.

FIX:

Change OLD Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3/TR/REC-html40/strict.dtd">

To NEW Doctype: <!DOCTYPE html>

I know this is YEARS later than the original question post, but I would have really appreciated stumbling across this answer.

I hope it helps someone out there.

本文标签： javascriptInput select dropdown not working in firefoxStack Overflow