首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浏览器兼容性自查

Author: Codec.Wang Date: 2020/08/29 在解决浏览器兼容性问题或使用一些较新的 Web 技术时,经常需要查看各浏览器对 HTML/CSS/JS/SVG/Web/HTTP...以下是两种不错的自查方式: CanIUse https://caniuse.com/ 搜索关键字就会给出该特性在桌面和移动端主流浏览器中的兼容数据: 该特性在全球浏览器中支持 + 部分支持的比例,可以点击搜索栏旁边的设置来显示中国的数据...浏览器的当前版本,往上是旧版本,往下是未来的版本 详情浮窗:该版本的发布时间和使用率等,浏览器使用率数据来自 StatCounter 附加资源:很多实用的链接,比如该特性的规范定义、功能演示、不支持该特性时可使用的...Polyfill等等 MDN 在 MDN(Mozilla Developer Network) 上查看接口的相关资料时,一般都会在最后给出浏览器的兼容数据,如: https://developer.mozilla.org

1.5K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    浏览器兼容性问题

    1.浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。...碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是...2.浏览器兼容问题五:图片默认有间距 问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。...碰到几率:20% 解决方案:使用float属性为img布局 备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。...(我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用) 3. ie6.0横向margin加倍 产生因素:块属性、float、有横向margin

    1.1K30

    减少浏览器兼容性问题

    做为一个前端工程师,不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。 确定运行环境 在开发前,我们要确定页面的运行环境:要兼容哪些浏览器,以及哪些屏幕分辨率。...查询特性的兼容性 在使用某个特性前,我们可以使用 Can I Use 来查询某特性在各个浏览器上的兼容性情况。也可以在代码中用 Modernizr 进行特性探测。...下面是一些查询兼容性的网站 es5规范浏览器兼容性表格 es6规范浏览器兼容性表格 html5 移动端兼容性速查 如果实在想用某个特性,但某个想兼容的浏览器不支持,可以找找有没库来做支持的 HTML5...所以我们要了解哪些写法会产生兼容性问题,然后避免那样写。 推荐认真研究浏览器兼容性-根本原因内容列表。 充分的测试 推荐使用 iTest。它是阿里出的测试工具。支持主流浏览器的截图,死链接检测等。...一些 CSS 属性记得要加浏览器前缀 有时页面的元素改变后,应该被重绘,但浏览器没有重绘,可以用让元素隐藏,然后再显示的方式来让浏览器重绘 拓展阅读 W3Help - 兼容性 - 根本原因内容列表 前端工程师如何系统地整理和累积兼容性相关的知识

    79020

    编写兼容性JS代码

    前文介绍了:  1 DOM四个常用的方法   2 使用DOM核心方法完成属性填充 本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与javascript的耦合使用java进行onclick...但是在编写合格的javascript代码时,需要注意:   1 平稳退化:保证在不支持js或者低版本的浏览器也能正常访问   2 分离javascript:把html与javascript分离,有助于后期代码的维护...  3 向后兼容性:确定老版本的浏览器不会因为脚本禁止而死掉   4 性能考虑:确定脚本执行的最优   编写优化的代码   针对前一篇中的相册的代码,这里主要修改的地方是把onclick方法删除,在页面加载时...return true; } addLoadEvent(prepareGallery);   上面部分的代码,添加了很多的安全性检查和兼容性

    3.2K90

    前端浏览器兼容性:解决跨浏览器挑战的终极指南

    前端开发中,浏览器兼容性是一个永恒的挑战。不同的浏览器、版本和设备可能导致网站或应用在某些情况下出现问题。...本文将深入讨论前端浏览器兼容性的关键概念,为您提供一份全面的指南,并提供带有实际代码示例的技巧,以解决跨浏览器的挑战。 第一部分:浏览器兼容性基础 1.1 为什么浏览器兼容性重要?...解释浏览器兼容性对用户体验和业务的重要性,以及不解决兼容性问题可能带来的后果。...-- 示例代码:使用jQuery库 --> 第四部分:兼容性测试和工具...# 示例代码:使用ESLint进行JavaScript代码检测 npm install eslint --save-dev npx eslint src/*.js 第五部分:兼容性解决方案 5.1 特性检测

    1.1K40

    4种方案解决CSS浏览器兼容性问题

    前言 前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配、兼容性问题。 ? 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了!...CSS浏览器兼容性问题的解决思路和方案 今天,不想去关注太多细节问题, 比如那个css样式需要我们去兼容,而是想讨论一下大的解决思路,主要包括4个方面,浏览器CSS样式初始化、浏览器私有属性,CSS hack...条件hack 条件hack主要针对IE浏览器进行一些特殊的设置 语法: ? IE ?]> 代码块,可以是html,css,js <!..., 并不能给我们技术上带来什么大的提升,无非是给各个浏览器厂商填坑罢了,随着时间的流逝,这些技术的价值也会越来越小,怎么花最小的力气解决css兼容性问题,让我们把更多的时间留给美好的生活,才是关键,好在有一些自动化插件可以帮我们从繁重的兼容性处理中解脱处理

    2.8K10

    Ajax创建对象以及不同浏览器中的兼容性

    但是也有自身的缺点,Ajax大量使用javascript和Ajax引擎,这需要浏览器的支持。但是各个浏览器提供的创建Ajax的方式不同,使得我们需要测试各个浏览器兼容性,这一点比较麻烦。...另一方面对于flash等还不支持Ajax,现在手机也不能使用,但是很明显,这只是现在不能,以后一定可以的~ 2.在html页面触发js脚本的时候,js脚本根据我们相应的动作去执行php文件,执行后可能会获得一部分结果...,而把这些结果再返回到js脚本中,再通过脚本当中的DOM组件直接反映在当前的html页面上,也就是说整个页面没有刷新,只是改变html页面上的某位置的内容。...3.创建Ajax对象XMLHttpRequest.由于各个浏览器的创建方式不同,所以我们写一个可以兼容各个浏览器的方法,在方法里我们实现各个浏览器中Ajax对象的创建。...在实现这个以前,我们先简单的分析一下,当前的浏览器分为IE浏览器((IE5.0 IE5.5 IE6.0, IE7 IE8))和非IE浏览器(按照W3C标准:FF Mozilla NetScape)两种,

    1.1K40

    介绍几款浏览器兼容性测试工具

    昨天和朋友聊到了有关浏览器兼容性的问题,在开发中有时的确很让人苦恼,我向他推荐了几款测试浏览器兼容的工具,分享给大伙,有什么更好的工具或是解决方法还希望大家拿出来晒一晒。 ?...IETester 这是我最先用的测试浏览器兼容性的工具,想必也是大家用的最多的一个,IETester是一个免费的Web浏览器调试工具,可以模拟出不同的js引擎来帮助程序员设计效果统一的代码。...可以方便的解决IE浏览器的兼容问题。 ?...根据微软的介绍,SuperPreview的可用IE版本视系统已安装IE浏览器的版本而定,如果系统安装了IE8,那SuperPreview浏览器测试可用版本就包括IE8、IE7和IE6;如果系统安装了IE7...不过,Microsoft Expression Web 3向所有浏览器敞开了大门,这里有篇不错的文章。大家可以了解下。

    3K10
    领券