专栏首页算法与编程之美浏览器兼容问题之我见

浏览器兼容问题之我见

在本人亲身跟进一些前端项目过程中,发现相同的项目在不同的浏览器中运行出来的展示效果不太一样。上网查询下发现这样的现象叫浏览器兼容问题。那么问题来了:为什么会有兼容问题呢?

在仔细了解浏览器方面的知识与H5特性之后,我发现市面上虽然有着种类繁多的浏览器,但不同的浏览器其自身的内核是不一样的,(内核可以理解成浏览器解析代码的心脏)因此不同的浏览器对于同样的代码的解析结果是不一样的,这就是导致兼容问题的最重要的原因。因此我们想要开发出一个能够推入实用阶段的网页就必须要解决网页在当前主流浏览器上的兼容问题。

对浏览器的兼容问题,又细分了如下几类:HTML兼容、Javascript兼容、css兼容。而HTML的问题比较好解决,其原因在于在低版本浏览器中运行了包含高版本浏览器涉及的元素,使得浏览器本身无法解析。

现在让我们来看一看我总结出来的常见的兼容问题以及解决方案:

问题一:不同浏览器的标签默认的外补丁和内补丁不同

问题症状:我们随意写几个标签,在不使用样式控制的前提下,运行出来的margin、padding差别很大。

解决方案:css里添加*{margin:0;padding:0;}

注意:这个问题本身是我们在这类问题中最常见的一个问题,因此几乎所有的网页css文件开头都需要使用通配符*来对标签的内外补丁统一为0.

问题二:图片默认有间距

问题症状:几个img标签放在一起的时候,个别浏览器中会出现图标之间有默认边距的问题,而且加上上文提到的通配符也不起作用。

解决方案:使用float属性浮动流来对img进行布局。

注意:因为img标签属于是行内标签,因此在不超出容器本身宽度的情况下,img标签通常是排在第一行的,但在少部分浏览器中的img标签之间会存在间距。此时使用float浮动流是最方便简单的方法。

问题三:标签最低高度设置min-height不兼容问题

问题症状:min-height本身就是一个不兼容css的属性,因此在设置min-height属性的网页就不能很好的被各浏览器兼容。

注意:这个问题也是在大咖的帮助下涉及到的,所以实战中遇到的可能性很低。

解决方案:假如我们要设置一个标签的最小高度为200px,需要进行这样的设置:{min-height:200px;height:auto !important;height:200px; overflow:visible;}

问题四:块属性标签float后,又有横行的margin情况下,在部分浏览器版本中显示的margin比设置的值大

问题症状:常见症状是在ie6中,后面的一块被顶到下一行。

解决方案:在float的标签样式控制中加入如下属性:display:inline;将其转化为行内属性。

问题五:设置较小高度的标签,在ie6\7中显示出来的高度超出设置值

问题症状:在ie6\7中,这个标签的高度不受样式css等控制。

解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line:height小于你设置的高度。

在开发这条路上遇到问题是小事,遇到问题说明你的知识还不够丰富,技术还不够成熟,也正是在解决这些问题的路上自身才能不断成长。因此难的不是问题本身,而是如何解决。在此希望读者能在今后的开发路上养成遇到问题先思考后动手的好习惯

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:吕奕

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入理解浏览器内核 - 概述

    浏览器是平时学习工作中使用的一个最为平凡的软件,同时也是最重要的一款软件,它是我们了解世界的窗户,所以有时候也称之为世界之窗。但是我们真的了解浏览器是什么吗?了...

    算法与编程之美
  • 深入理解浏览器内核 - 火狐浏览器常用插件

    Mozilla Firefox,中文俗称"火狐"(正式缩写为Fx或fx,非正式缩写为FF),是一个自由及开放源代码网页浏览器。因为其可以自由定制,而它的插件又是...

    算法与编程之美
  • 谈一谈|你不知道的黑客

    现代人的生活离不开互联网,提到互联网人们总会想到一个词,那就是黑客。对于黑客大家对他们的了解却只局限于电影、电视中他们“无处不在”的可怕和他们“翻手为云覆手为雨...

    算法与编程之美
  • 解决WordPress登录出现”Cookies被阻止或者您的浏览器不支持”

    今天早上捣鼓网站,登陆WordPress后台,确定密码也都是没有问题的。错误提示"Cookies被阻止或者您的浏览器不支持。要使用WordPress,您必须启用...

    陌涛
  • json数据发送时浏览器提示“保存”解决

    数据以json形式发送的时候,部分浏览器不能直接解析,而是提示是否保存,nodejs的express应用中可以通过如下代码解决该问题: router.get('...

    用户1141560
  • 推荐几款极简的手机浏览器

    对于本人而言,不喜欢浏览器的首页有多余的新闻,天气以及其他的推送信息,作为一款浏览器,就应该有一款浏览器该有的样子。今天就给大家推荐几款个人认为极简的手机浏览器...

    编程珠玑
  • Python骚操作!同事用Python操控浏览器运行,引的妹子围观不止!

    看起来虽然是三个方法,实质上还是一个, 区别只是在于传递的参数不同。webbrowser.open(url, new=0, autoraise=True)

    python学习教程
  • 部署SSL后,为何网站还是显示不安全?

    漫漫长夜,实在是无聊至极(ps.请忽视这个所谓的节日),正好近期遇到有些朋友问我关于SSL证书部署后的问题,又正好前天我遇到了这个问题。关于为什么部署了SSL证...

    乐网网络
  • 浏览器渗透之BeEF的高级烹饪方式

    Kali Linux内已经有BeEF的环境,只需要进入/usr/share/beef-xss目录下,./beef运行即可

    漏洞知识库
  • 查看WordPress站点主题的方法

    神无月

扫码关注云+社区

领取腾讯云代金券