4

我在 Firefox 浏览器中遇到输入选择下拉问题,但在 Google Chrome 中运行良好。

我创建了一个 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;
}

还分享给你一个链接 我们尝试过的地方包括所有的 js 文件。请在两个浏览器(firefox 和 chrome)中查看该链接

4

3 回答 3

2

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

此外,我在 Firefox 中的测试没有显示任何错误。我正在使用 23.0.1。

于 2013-09-02T05:56:18.033 回答
1

我刚刚重构了整个 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 行

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

有人在这里发布了一个解决方案,当鼠标悬停在选择下拉菜单上时,包含 div 失去焦点

于 2013-09-02T12:51:46.853 回答
0

2021 年 7 月 14 日

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

我已经管理一个 Grails Web 应用程序多年了,就在前几天遇到了这个问题,我的网站在所有浏览器中都运行良好,但是无论出于什么奇怪的原因,Firefox 根本不会<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>

我知道这比原始问题帖子晚了几年,但我非常感谢偶然发现这个答案。

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

于 2021-07-14T05:32:16.623 回答