button的样式在浏览器上的兼容性

最新推荐文章于 2024-04-21 22:53:42 发布
原创 最新推荐文章于 2024-04-21 22:53:42 发布 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了一个使用Angular路由的返回按钮在Chrome下有效，但在Firefox和IE下无效的问题。通过浏览器调试发现，在Firefox中button标签挡住了a标签导致点击无效。最终将button标签替换为span标签解决了该问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

button标签的样式在不同浏览器下也有样式上的不同：

今天发现一个用angular路由写的返回按钮在Chrome下有效，在Firefox、IE下无效，代码如下


浏览器调试，发现在Firefox下，button标签完全挡住的a标签，所以才点击无效，于是我就把button换成了span，就解决问题了



记录这个问题，加深记忆

Vue3高级-第三十八篇：Vue3 项目的跨浏览器兼容性处理
无
05-08 249
在 Vue3 项目中的应用 在 Vue3 组件中，可以在 生命周期钩子函数中进行特性检测。例如，在一个需要使用 CSS 属性实现毛玻璃效果的组件中： （二）使用 polyfill 库（如 Babel-Polyfill、Modernizr）来填补不同浏览器对新特性支持的缺口 Babel-Polyfill 功能与原理：Babel-Polyfill 主要用于填补浏览器对 ES6 及以上 JavaScript 特性的支持缺口。它通过模拟缺失的 JavaScript 特性来实现兼容性。例如，对于 、 等在
浏览器兼容性问题及解决方案大汇总
qq_51179053的博客
07-03 3509
所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。解决方法前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。CSS兼容问题1、不同浏览器的标签默认的内外边框不同。解决方案 {margin:0;padding:0}/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, objec
button标签在浏览器之间的小差别
weixin_33922670的博客
06-27 172
为什么80%的码农都做不了架构师？>>> ...
移动端去掉按钮button默认样式
weixin_30300225的博客
04-22 144
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...
谷歌浏览器识别不出按钮的css样式
qq_42214286的博客
12-16 1264
谷歌浏览器非正常显示注册按钮 火狐浏览器、ie浏览器都能正常显示： 原因：谷歌浏览器自带的翻译功能，会自动把按钮翻译，导致css样式消失。 调整为英文就变正常了： 强迫症的我犯了，一直看不惯这个小按钮，花了4个小时才找出原因。 之前注册页面还报错，先花了3个小时把regist.html 页面的 name 为 null 的错误排除掉。最后半个小时，突然百度到按下 ctrl + f5 可以强制刷新（https://www.cnblogs.com/dinjufen/p/8097769.html）。 然后
Web开发之Button按钮兼容性问题
Json
11-08 1933
这几天被一个问题折磨了。 form表单内Button按钮会自动提交表单，导致意外的界面效果。 在谷歌浏览器中好像有处理这个问题，FF浏览器中需要手动处理，给button标签加上type=”button”。
怎么样解决浏览器兼容问题 css样式重置
A535366的博客
09-13 378
重置浏览器标签的样式表,因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如button标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。 好处：开始一个项目前，先创建一个reset.css，可以规避很多浏览器差异问题。。。 1.在根目录创建一个文件夹reset 里面放置reset.css文件 文件内容如下： html,body,div,span,applet,obj
浅谈浏览器的兼容模式下的button中文字垂直方向不居中显示
09-22
浏览器兼容模式是指在现代浏览器中模拟旧版浏览器渲染页面的方式，以便开发者能测试其网站在旧版浏览器上的表现。这通常与“标准模式”或“怪异模式”相对应。现代浏览器中包括IE在内的多数浏览器都支持这种模式。...
浏览器CSS兼容性问题解决方案整理
最新发布
luoawai的博客
04-21 1633
浏览器CSS兼容性问题解决方案整理
web前端关于浏览器兼容性
SHINE_SUNNY1的博客
10-24 2016
web前端关于浏览器兼容性所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题：一、不同浏览器的标签默认的外补丁和内部顶不同这个大家就很常见了，我们知道每个浏览器对margin和p
36种漂亮的CSS3网页按钮Button样式
01-03
36种漂亮的CSS3网页按钮Button样式
前端 macos和win 相同的样式谷歌浏览器显示不一致
weixin_45503703的博客
07-10 2751
开发环境：angular 自定义组件实现过程中，发现加的行内样式在macos 和 win下现实的长度不一致 <input type="button" class='form-control read-only' style="width: 170px" ng-click="selectTime()" value="选择日期" /> 本意是想和某输入框大小保持一致 解决方案： 用ng-style 通过ctl 动态更改style <input type="button" class='for
button在IE、360中失效，Firefox、谷歌上是好的
weixin_33888907的博客
04-13 174
把<button换成<a ================== <a href="JavaScript:document.forms.CatalogSearchForm.searchTerm.value=trim(document.forms.CatalogSearchForm.searchTerm.value);document.forms....
关于Element UI在表格中添加Button不显示的问题（已解决）
weixin_55797565的博客
03-30 9619
Element UI采用了外部引入的方式： <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"
button元素兼容问题浅析
weixin_30722589的博客
08-10 177
缺省type属性值 <button>提交</button> button元素的type属性值有submit、button可选，在上面这种没有明确指出type值的情况下，浏览器的缺省值不一样； IE6、IE7、IE8兼容模式缺省是type="button"，其它浏览器缺省是type="submit"，要验证这点可以把它放到form表单元素中，点击按钮看是否做了提交...
input button和text在不同浏览器中的默认样式
awnc45298的博客
04-02 236
button的width和height和标准的盒模型不一致，是指的包含边框在内的宽度和长度 测试代码： <!DOCTYPE html> <html> <body> <input id="box" type="text"></input> <input type="button" value="按钮"&g...
一个兼容IE的Button样式
熊猫小白的博客
01-30 1522
css 一个纯button样式，兼容ie  此作为紧急用，当按钮无样式的时候，可以试试这个进行美化。简单，又好看。 button{     display: inline-block;     outline: none;     cursor: pointer;     text-align: center;     text-decoration: none;     font: 14px/...
button 兼容性问题
qq_37324690的博客
11-13 1453
改文章是基于 谷歌浏览器，360浏览器（兼容模式），火狐浏览器，和QQ浏览器的极速模式下 兼容性问题 首先我们先了解下  各个浏览器的内核 谷歌浏览器：Google Chrome，谷歌浏览器之前一直使用苹果的webkit内核，但是现在它与苹果内核分道扬镳，自己开创了新的blink内核，这个内核也在被欧鹏（opera浏览器）共同采用和开发； 360极速浏览器：基于谷歌内核和IE内核 （兼容模式...
兼容性强的eBay高端按钮设计
综合以上分析，我们可以了解到，在创建一个高端大气上档次的button按钮时，不仅要在设计上下功夫，更要确保技术实现上的兼容性和响应性。此外，对用户体验的重视、对设计细节的打磨以及对前端技术的掌握，都是成功...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值