减少浏览器兼容性问题

简介:

做为一个前端工程师,不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。


  确定运行环境


  在开发前,我们要确定页面的运行环境:要兼容哪些浏览器,以及哪些屏幕分辨率。

  如果我们不了解我们的运行环境,兼容性也无从谈起。也只有在确定来运行环境后,我们才可以选择合适的方式。我们可以借助 HTML5 与 CSS3 技术应用评估来选择用哪些技术。


  查询特性的兼容性

  在使用某个特性前,我们可以使用 Can I Use 来查询某特性在各个浏览器上的兼容性情况。也可以在代码中用 Modernizr 进行特性探测。


  下面是一些查询兼容性的网站

  es5规范浏览器兼容性表格

  es6规范浏览器兼容性表格

  html5 移动端兼容性速查


  如果实在想用某个特性,但某个想兼容的浏览器不支持,可以找找有没库来做支持的

  HTML5 Cross Browser Polyfills

  HTML5 POLYFILLS


  了解哪些写法会产生兼容性问题


  有时候一些兼容性问题的产生并不是因为我们的写法问题,而是浏览器自身的 bug(如 IE 6 的双边距问题),或者浏览器对标准的支持不一致。所以我们要了解哪些写法会产生兼容性问题,然后避免那样写。

  推荐认真研究浏览器兼容性-根本原因内容列表。


  充分的测试

  推荐使用 爱测试iTest平台。它是阿里巴巴研发的前端自动化测试工具,支持主流浏览器的JS错误检测,支持页面截图,一键验证,坏死链接检测等。

  现在一些多浏览器自动化测试的工具,服务(如 Sauce LABS)也很多,暂时还没怎么研究,以后研究后可以给大家分享~


  一些技巧


  让用 IE 访问页面时,尽可能用最新的 IE 渲染引擎。通过加在 HTML 中加标签 <meta http-equiv="X-UA-Compatible" content="IE=edge">。

  让双核浏览器(如 360,搜狗等国产浏览器)访问本网页时,用 webkit 内核来渲染。通过加在 HTML 中加标签 <meta name="renderer" content="webkit">。(注:目前只有 360 浏览器支持)

  用 HTML5 的 DocType:<!DOCTYPE html PUBLIC>。避免使用有问题的 DocType 而导致的浏览器用怪癖模式来渲染页面。


  一些 CSS 属性记得要加浏览器前缀


  有时页面的元素改变后,应该被重绘,但浏览器没有重绘,可以用让元素隐藏,然后再显示的方式来让浏览器重绘

相关文章
|
7天前
|
存储 弹性计算 缓存
阿里云服务器租赁费用:新版租赁收费标准及活动报价参考
本文更新了2026年阿里云全系列云服务器租赁活动报价,所有特惠资源均可前往阿里云活动中心选购,整体覆盖从个人入门到企业级高性能场景的全梯度需求。其中轻量应用服务器主打极致性价比,2核2G峰值200M带宽配置每日10点、15点限时抢购价仅38元/年,2核4G配置379元/年起;高性价比的经济型e实例、通用算力型u2i实例覆盖2核4G至4核32G全档位,适配开发测试与中小型企业业务;搭载英特尔至强6处理器的第九代c9i企业级实例算力较上代提升20%,支撑高并发生产环境,不同实例规格价差清晰,用户可根据自身业务负载与预算灵活选型。
1745 117
|
8天前
|
人工智能 程序员 API
Codex 接入 DeepSeek-V4-Flash:还能补上识图,提供两套方案
Codex 接入 DeepSeek-V4-Flash 怎么配?本文覆盖 CLI 与桌面端,再用 qwen3-vl-flash 补识图,两套方案可直接照做
1249 9
|
14天前
|
云安全 人工智能 运维
阿里云联动百位企业安全专家,共识Agent防御最佳实践
当Agent成为新员工,你的安全边界在哪里?
1956 9
阿里云联动百位企业安全专家,共识Agent防御最佳实践
|
8天前
|
编解码 人工智能 安全
2核4G/4核8G/8核16G阿里云服务器如何选择实例?经济型e、通用算力型u2i与计算型c9i选哪个?
本文介绍了阿里云2核4G、4核8G、8核16G三档主流配置下经济型e、通用算力型u2i和计算型c9i三种实例的最新活动价格与适用场景。同配置下三者价差显著,以2核4G为例,经济型e低至599.93元/年,计算型c9i则高达1742.08元/年。文章详细解析了各实例的性能定位:经济型e适合轻负载入门场景,u2i兼顾稳定算力与性价比,c9i凭借第9代至强处理器与芯片级安全能力支撑高性能业务。同时提示用户可叠加满减优惠券享受折上折,建议根据业务负载与预算综合决策。
543 112
缓存 安全 IDE
957 2
|
20天前
|
人工智能 前端开发 Linux
Codex 桌面版安装 + CC Switch 接入第三方 API 完整教程(2026 最新)
2026最新教程:手把手教你安装Codex桌面版,通过CC Switch v3.17.0一键接入Fenno等国产API(兼容OpenAI Responses格式),跳过账号登录,完整启用代码审查、多步任务与上下文感知功能。零基础友好,全程图文实操。(239字)
2941 4
|
8天前
|
人工智能 JSON Shell
2026AI漫剧本地全开源方案(附各个软件模型链接),8G显卡也能流畅运行
这是一套完全本地化部署的AI漫剧生成技术链路:涵盖LLM剧本分镜生成、FLUX文生图(IP-Adapter人脸锁定)、StoryDiffusion时序连贯控制、LTX-2.3唇形同步视频生成,及ComfyUI全流程调度。零云端费用,仅耗硬件算力,单集2–4小时可产出竖屏短视频,适配抖音/B站分发。
|
5天前
|
编解码 弹性计算 云计算
MiniMax-H3 视频生成模型 — 一键部署与使用指南
MiniMax-H3是MiniMax开源的33B全模态视频生成模型,支持文生视频、图生视频、参考生视频三种模式,原生输出2K/15秒带立体声音频视频,已原生适配ComfyUI,并可通过阿里云计算巢一键部署。(239字)
|
12天前
|
存储 人工智能 关系型数据库
阿里云AI产品与云产品最新组合套餐:Token Plan、AI coding及云服务器和建站等组合优惠价
阿里云推出全新“算力+模型+应用”一站式云与AI组合套餐活动,覆盖从个人开发者到中大型企业的全场景需求。核心亮点为分三档定价的Token Plan订阅服务,支持Qwen3.8-Max-Preview大模型调用,错峰时段最低可享0.2折优惠。活动同步推出AI Coding、智能体部署、云电脑托管、0代码建站等十余类场景化组合,搭配99元/年的普惠云服务器、88元/年的入门数据库等经典特惠产品,还为企业提供1V1定制化AI转型方案,大幅降低了不同用户群体拥抱AI的技术门槛与采购成本。
748 111