`
zhouyrt
  • 浏览: 1159166 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

仅Firefox中A元素包含Select时点击Select不能选择option

 
阅读更多

这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下

<!DOCTYPE HTML>
<html>
<head>
    <title> 仅Firefox中A元素包含Select时点击Select不能选择option </title>
</head>
<body>
    <a href="javascript:void 0"><select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select></a>
</body>
</html>

代码很简单,元素A包含了一个Select,在Firefox中打开该页面,点击select,第一次出现下拉的option。第二次以后再点击,则不会出现option选项。甚是奇怪。

 

最后为了保证每次点击select,都能正常弹出option,可以把元素A去掉,或把元素A换成SPAN。

 

测试Firefox版本:24-32

 

 

  • 大小: 1.1 KB
分享到:
评论

相关推荐

    Firefox中A元素包含Select时点击Select不能选择option bug

    仅Firefox中A元素包含Select时点击Select不能选择option &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;a&gt;&lt;select&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;option&gt;3&lt;/option&gt; &lt;option&gt;4&lt;/option&gt; &lt;/...

    select下拉列表显示图片内容

    自定义的`select`下拉框需要在各种主流浏览器中保持一致的表现,包括Chrome、Firefox、Safari、Edge和Internet Explorer。因此,测试和调整代码以确保兼容性至关重要。 通过以上技术,我们可以实现`select`下拉...

    兼容火狐select样式.zip

    在Firefox中,`&lt;select&gt;`元素的默认样式通常比较朴素,可能与设计师期望的自定义界面风格不匹配。为了实现跨浏览器的样式一致性,我们需要用到CSS来覆盖或定制这些元素的默认样式。然而,由于安全性与性能考虑,...

    select标签边框的颜色select标签边框的颜色

    因此,确保代码在主流浏览器(如 Chrome、Firefox、Safari、Edge 和 IE11)上表现一致至关重要。 ### 3. 外部样式表与内联样式 你可以将这些样式放在外部 CSS 文件中,以便在整个网站中统一应用,或者直接在 HTML ...

    select下拉查询支持中文

    在网页开发中,`select`元素常常用于创建下拉选择框,它允许用户从一系列预定义的选项中进行选择。然而,在中文环境下,确保`select`下拉查询能正确显示和处理中文字符是一项重要的任务。本篇文章将深入探讨如何实现...

    用JavaScript来美化HTML的select标签的下拉列表效果

    - 为了在多浏览器下保证兼容性,需要对主流浏览器(如Chrome、Firefox、Safari、IE/Edge等)进行测试,确保在不同环境下都能有良好的表现。 通过上述的方法,开发者可以解决select下拉列表在不同浏览器下默认样式不...

    Select2的插件下载.zip

    Select2具有良好的浏览器兼容性,支持现代的浏览器,包括Chrome、Firefox、Safari、Edge以及IE9及以上版本。此外,由于其基于jQuery构建,因此在与其他jQuery插件或框架(如Bootstrap)集成时,通常不会有太大问题。...

    editableSelect可编辑搜索的下拉框插件

    `editableSelect`通常兼容主流的现代浏览器,包括Chrome、Firefox、Safari、Edge以及IE9及以上版本。对于性能方面,由于采用实时搜索,因此在大量选项时可能需要注意优化,比如设置适当的搜索延迟或预加载机制。 ...

    IE6/7/8中Option元素未设value时Select将获取空字符串

    IE6/7/8中Option元素未设value时Select将获取空字符串&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;select onchange=”alert&#40;this.value&#41;”&gt; &lt;option&gt;one&lt;/option&gt; &lt;option&gt;two&lt;/option&gt; &lt;option&gt;...

    Javascript Select操作大集合

    另一种方式是使用DOM操作,适用于所有现代浏览器,包括Firefox,如`fnAdd(oListbox, sName, sValue)`函数,它通过创建新的Option元素并将其添加到Select中。 2. **删除Option** 删除Select中的Option可以通过选择...

    jquery Firefox3.5中操作select的问题

    这可能是因为新版本的Firefox浏览器在处理select元素和其内部option元素的DOM结构时,对属性选择器的支持有所改变。 为了解决这个问题,开发者查阅了jQuery的官方帮助文档,并发现了另一种推荐的方法,即使用 $("#...

    select下拉菜单option文字粗体的实现方法

    如下图: ... Windows …&lt;/option&gt;&lt;option value =11&gt;Firefox: Mozilla/5.0 (Windows; U; Windows …&lt;/option&gt;&lt;option value =12&gt;Opera: Opera/9.27 (Windows NT 5.2; U; …&lt;/option&gt;&lt;option value =

    select多选与美化

    在网页开发中,选择框(Select)是常见的一种交互元素,用于用户进行多项选择。"select多选与美化"这个主题关注的是如何在HTML的下拉列表中实现多选功能,并且兼容各种主流浏览器,包括Firefox、Opera、Chrome、...

    javascript操作Select标记中options集合

    在JavaScript中,`&lt;select&gt;`元素是用来创建下拉列表的,而`&lt;option&gt;`标签则用于定义下拉列表中的选项。这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。...

    editable select

    6. **兼容性**:jQuery Editable Select通常与现代浏览器兼容,包括Chrome、Firefox、Safari、Edge和IE9及以上版本。 在实际应用中,要使用这个插件,你需要将`jquery.js`和`jquery.editable-select.js`(以及可能...

    js动态改变select选择变更option的index值示例

    select元素包含多个option元素,每个option元素代表一个下拉菜单的选项。option元素有一个属性叫做selected,用来标识该选项是否被选中。 在进行操作前,我们可以通过select元素的id或者直接引用来获取到select元素...

    jQuery Select(单选) 模拟插件 V1.3.6

    作为一款基于jQuery的插件,"jQuery Select(单选) 模拟插件 V1.3.6"应当兼容大部分现代浏览器,包括Chrome、Firefox、Safari、Edge等。然而,对于老版本的IE浏览器,可能需要确保已安装了jQuery的兼容库。 ### 6. ...

    jquery select插件带搜索框的下拉选择框代码

    然而,原生的`&lt;select&gt;`元素功能有限,不支持搜索功能,这在处理大量选项时可能会变得不便。为了解决这个问题,开发者通常会使用jQuery插件来增强`select`的功能,如创建带搜索框的下拉选择框。 本项目提供的...

    JQuery插件searchSelect

    在网页开发中,当面对包含大量选项的下拉菜单时,用户往往需要花费较长时间去寻找目标项,而searchSelect插件则通过内置的搜索框功能,使用户可以快速定位并选择所需内容。 **一、功能特性** 1. **实时搜索**:...

Global site tag (gtag.js) - Google Analytics