浏览器兼容性问题/及解决方案

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 31 天，点击查看活动详情

• 浏览器的兼容性问题简单来说就是相同的代码，在不同浏览器呈现出来的样式不一致，有的可能在这个浏览器正常显示，而到了另外一个浏览器就结构不一样，发生了变化。
• 很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。

下面就列举几个经常遇到的浏览器兼容问题：

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

• 问题体现：：随便写几个标签，在不加人恶化样式控制的情况下，各自的margin和padding差异较大。而我们在工作中又经常会遇到这种问题。
• 解决方案：我们写项目的时候，经常会有一个reset.css文件，也就是重置文件，首先会把所有标签的margin和padding都归0，这样的话就不会发生上面的问题了。

具体代码（可以卸载全局css文件，或者reset.css文件中）
*{
  margin: 0 ;
  padding: 0 ;
}

浏览器兼容问题二：标签高度小于10px兼容的问题

• 问题体现：如果是在IE6、IE7当中，设置元素的高度为10px的话，实际上渲染出来的要比自己设置的高，这是因为浏览器给标签设置了默认最小高度。
• 解决方案：

设置该元素的{
   overflow: hidden ; 或者line-height: 行高小于自己设置的高度
}

浏览器兼容问题三：IE9一下浏览器不支持opcity

• 问题体现：就是设置了不生效。
• 解决方案：Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter

浏览器兼容问题四：在Chrome中字体不能小于10px

• 解决方案：p{font-size: 12px; transform: scale(0.8);}

浏览器兼容问题五：CSS3兼容前缀表示

写法	内核	内核
-webkit-	webkit渲染引擎	chrome/safari
-moz-	gecko渲染引擎	Firefox
-ms-	trident渲染引擎	IE
-o-	opeck渲染引擎	Opera