前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端解决浏览器兼容问题

前端解决浏览器兼容问题

作者头像
且陶陶
发布2023-04-12 14:51:40
5140
发布2023-04-12 14:51:40
举报
文章被收录于专栏:Triciaの小世界
不兼容原因:

不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种,一是渲染引擎,一个是js 引擎,内核更加倾向于说渲染引擎。 常见的浏览器内核可以分为这四种:

  1. Trident
  2. Gecko
  3. Blink
  4. Webkit

常见的浏览器内核:

浏览器

内核

IE浏览器

Trident内核

Chrome浏览器

Blink内核

Opera浏览器

Blink内核

Safari浏览器

WebKit内核

Firefox浏览器

Gecko内核

1、不同浏览器的默认样式不同,可以使用Normalize.css解决。

Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。

Normalize.css只是一个很小的css文件,但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性。 相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。总之,Normalize.css是一种CSS reset的替代方案。

2、不同浏览器的标签默认的外补丁和内补丁不同 使用CSS里 *{margin:0;padding:0;} 解决。

3、块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大。 float布局最常见的浏览器兼容问题。在float的标签样式控制中加入 display:inline;将其转化为行内属性。

4、设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

5、图片默认有间距 解决方案:使用float 为img 布局

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-03-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 不兼容原因:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档