怎么解决html的兼容性,前端中常见的兼容性问题有哪些?如何解决?

当我们编写了一个网页,也就是常说的HTML文件,我们需要进行运行让它以网页形式展现出来。浏览器的不同可能会导致运行效果的不同,这就属于兼容性问题。这篇文章 W3Cschool 小编来为大家解答一下前端中常见的兼容性问题有哪些?如何解决?

浏览器兼容性

兼容性问题的出现,是因为浏览器内核的不同,导致的解析差异。我们常见的浏览器内核主要有两种,分别是渲染引擎和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(高速模式)

常见的兼容性问题:

不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同。在不加样式的情况下,margin 和 padding 差异较大。这是最常见的浏览器兼容性问题,但也是最好解决的一个。

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

块属性标签设置了 float , 同时又设置 margin , 在 IE6 运行中,后面那一块会被顶到下一行。

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

当标签的高度设置小于 10px,在 IE6、IE7 中会超出自己设置的高度。

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

图片默认有间距。当几个 img 标签放在一起的时候,有的浏览器会有默认间距,即使加了通配符也不起任何作用。

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

td 自动换行问题。table 宽度固定,td 会自动换行。

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

IE9一下浏览器不能使用 opacity

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

IE7以下版本 line-height 失效。在IE浏览器中,img 与文字放在一起时,line-height 不起作用。

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

边距重叠问题;当相邻两个元素都设置了 margin 边距时,margin 将取最大值,舍弃最小值;

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

cursor:hand 显示手型在 safari 上不支持。

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

两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ; 且高度大于父元素,在 IE7 以下版本浏览器会被隐藏而不是溢出。

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

以上就是小编整理的常见的前端兼容性问题,以及兼容性问题的解决方案。更多前端的兼容性问题解决请学习 HTML 教程。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值