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

最新推荐文章于 2024-07-24 16:20:17 发布
最新推荐文章于 2024-07-24 16:20:17 发布
阅读量138 收藏
点赞数
分类专栏： Brower compatibility 文章标签： javascript ViewUI

这是在使用京东的一个日期组件时碰到的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

 

 

魔豆爸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
十六.python+selenium之Select模块定位select+option标签
药药君
08-06 2153
使用Selcet需要导入该模块的包 导入模块方法：from selenium.webdriver.support.select import Select 一般使用3种方法来定位： 1.   通过索引来定位: select_by_index()   2.   通过文本值来定位：select_by_visible_text()   3.   通过value值来定位： select_by_v...
降龙十八掌
热门推荐
fu_jian_ping的博客
05-27 2万+
第一章 1、以下有关Spring框架优点的说法正确的是()。 A、Spring!具有简单、可测试和松耦合等特点,从这个角度出发,spring就是应用于任何ava应用的开发中; B、Spring提供了对AOP的支持,它允许将一些通用任务,如安全、事务、日志等进行集中式处理,从而提高了程 序的复用性 C、spring就是个大工厂,可以将所有对象的创建和依赖关系的维护工作都交给Spring...
谷歌调试工具选取元素选择不到页面的详细元素问题
weixin_34112900的博客
09-22 701
z-index的问题 document的默认值是0. 一旦出现这样的问题，检查下是否对大背景设置了z-index：-1; 假设设置了这个，那么全部的被设元素的内容都会在document之下，选取不到。包含不会出现链接点击、文字选取、hover等效果。 所以解决问题的方法就是把大背景的z-index:-1;去掉就可以。 ...
select点击无法触发下拉列表
Crazy_Sakura的博客
05-27 4140
在外层div标签中添加属性data-tap-disabled="true"
select的下拉列表选不中问题
aliven1的博客
07-26 1904
一般是受到父级以上元素mouseleave事件中overflow:hidden设置的影响， 解决方案： 找到这个绑定mouseleave事件的父级别元素，在对应的事件中加阻止overflow的执行； 例如：leave(event){              let e=event.relatedTarget || event.toElement;              let el=e...
Firefox中A元素包含Select时点击Select不能选择option bug
01-19
仅Firefox中A元素包含Select时点击Select不能选择option </title> </head> <body> <a><select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </...
IE6/7/8中Option元素未设value时Select将获取空字符串
12-12
IE6/7/8中Option元素未设value时Select将获取空字符串</title> </head> <body> <select onchange=”alert(this.value)”> <option>one</option> <option>two</option> <option>...
select下拉菜单option文字粗体的实现方法
01-19
如下图： ... Windows …</option><option value =11>Firefox: Mozilla/5.0 (Windows; U; Windows …</option><option value =12>Opera: Opera/9.27 (Windows NT 5.2; U; …</option><option value =
火狐下<a>标签里嵌套的<select>不能选的bug
weixin_30369087的博客
06-23 81
今天遇到了这个问题，网上一找就找到原因了：在狐火下<a>标签里嵌套的<select>不能选 可是我查找这个问题过程中依然饶了一些时间，原因是在<a>标签没有写href属性下，嵌套的<select>是可以选的 记录一下吧 转载于:https://www.cnblogs.com/huhy/p/4595158.html...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 397
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1052
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
【React 】开发环境搭建详细指南
lph159的博客
07-24 827
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 990
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 893
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 985
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 501
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 300
thinkphp8图片上传的验证
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
最新发布
KenkoTech的博客
07-24 336
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
h5中的select下拉框在ios中样式兼容问题解决方案。 实例
05-30
/* 去掉firefox默认样式 */ appearance: none; /* 去掉其他浏览器默认样式 */ background-image: url('path/to/arrow-icon'); /* 添加自定义的下拉箭头图标 */ background-size: 12px; /* 设置图标大小 */ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值