热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

前端样式兼容的技巧

我从事前端行业也蛮长时间,想想自己当初刚入行的时候被众多不同内核的浏览器的兼容头痛,经常是在这个浏览器上调试好了,但是在那个浏览器上又出问题。真是不同版本,不同浏览器搞的你是晕头转向的。但是,也正

  我从事前端行业也蛮长时间,想想自己当初刚入行的时候被众多不同内核的浏览器的兼容头痛,经常是在这个浏览器上调试好了,但是在那个浏览器上又出问题。真是不同版本,不同浏览器搞的你是晕头转向的。但是,也正是这些bug,这些兼容问题,才体现出前端的价值是吧,哈哈!当然,只是一小部分啦。下面是我在工作的时候总结出来的一些调试页面兼容问题的方法,希望能帮到一些遇到问题的同学。

  1.利用各种前端利器辅助查找问题根源 ---Firebug,IE WebDeveloper等等。

  2.边框背景调试法 ---估计一下出错的位置在那,在它的标签上加边框或背景,这样就可以看到该模块占了多少位置,是否在撑出规定的范畴。

  3.最大宽度最小宽度法 ---找到出错区块修改出题的模块的宽度,如果宽度改小后,下沉问题解决。就可以判断问题就是出现在这个元素上。

  4.样式排除法 ---有些复杂的页面也许加载了 N 个外链 CSS 文件,那么逐个删除 CSS 文件,找到 BUG 触发的具体 CSS 文件,缩小锁定的范围。

  5.模块确认法 ---有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块,寻找到触发问题的 HTML 模块。

  6.至于其它问题的,最好的办法就是google,百度,看书。对于这些方法还不行,可以问有经验的同事帮忙。

以上就是我平时工作总结出来的,虽然很是基础,却也还是实用的。在解决问题的时候当然也需要你对一些浏览器的一些渲染等工作原理的知晓才能解决问题。在解决页面兼容问题上还有很多方法,还希望其他高手指点,欢迎留言交流,3Q

 

  


推荐阅读
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • 凡客诚品官方网站的前端改进建议
    打开http:www.vancl.com发现采用的Asp.net,这点我感到很欣慰,毕竟国内采用.net技术体系的优秀网站少之又少。好奇之余右键-查看源 ... [详细]
  • SeleniumWebDriver3.0自动化测试框架实战指南 ... [详细]
  • 动态json文件php(json拼接动态数据)
    本文目录一览:1、如何php将一个动态的数组转换为json的格式 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • JSCoverage-->JavaScript测试覆盖率检测工具(转),Go语言社区,Golang程序员人脉社 ... [详细]
  • 高仿CSDN社区树形图 .
    一直感觉CSDN社区的树形结构特别的人性化,直观化。最近做系统的时候需要用到这个树形结构,于是模仿CSDN的树形结构做了一个自己的树形结构, ... [详细]
  • 采集程序【开源项目】
    更新:通过一些朋友的回复,了解到,可能文章太长了,有朋友只是简略浏览,所以还没有明白程序工作流程。简单介绍&# ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • IamtryingtouseLESSCSStowritemyCSS.Ihaveimportedthestyle.lessandless.jsfileinthat ... [详细]
author-avatar
浅笑二度
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有