web前端中常见的兼容性问题有哪些及怎么解决

发布时间:2022-02-25 10:47:25 作者:iii
来源:亿速云 阅读:715

这篇“web前端中常见的兼容性问题有哪些及怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“web前端中常见的兼容性问题有哪些及怎么解决”文章吧。

浏览器兼容性

兼容性问题的出现,是因为浏览器内核的不同,导致的解析差异。我们常见的浏览器内核主要有两种,分别是渲染引擎和js引擎。

最常见的浏览器内核有四种:Trident,Gecko、Blink、Webkit

 IE 浏览器Trident 内核 
 Chrome 浏览器 Webkit 内核,现在是 Blink 内核
 Firefox 浏览器 Gecko 内核,俗称 Firefox 内核
 safair 浏览器 Webkit 内核
 Opera 浏览器 现在是 Blink 内核
 360 浏览器IE+Chrome 双内核 
 猎豹浏览器 IE+Chrome 双内核 
 百度浏览器 IE 内核 
 QQ 浏览器 Trident(兼容模式)+Webkit(高速模式)

常见的兼容性问题:

如何解决: css 里增加通配符 * { margin: 0; padding: 0; }

如何解决:在 float 样式标签中加入 display:inline 将其转化为行内属性。

 如何解决:给超出高度的标签设置 overflow:hidden,或者设定 line-height 的值小于你设置的高度。

 如何解决:使用 float 为 img 布局

  如何解决:设置 table 样式为 table-layout:fixed,td为word-wrap:break-word

  如何解决:opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

  如何解决:两者都设置为 float

 如何解决:为了不让边重叠,可以给子元素增加一个父级元素,并将父级元素设置为overflow:hidden

 如何解决:统一使用 cursor:pointer

 如何解决:父级元素设置 position:relative

以上就是关于“web前端中常见的兼容性问题有哪些及怎么解决”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. 常见的CSS兼容性问题及解决方法有哪些
  2. 常见的cdn问题有哪些?怎么样解决?

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web前端

上一篇:css如何将图像设置为背景

下一篇:css怎么设置部分文本的背景颜色

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》