浏览器兼容性问题，前端性能优化、SEO优化

---

一、常见浏览器兼容性问题及解决

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。
不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。

浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

常见的浏览器内核：

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

解决方案： 使用css 里增加通配符 * { margin: 0; padding: 0; }，或者通过给在页面中使用到的标签元素逐个增加初始margin、padding 值为 0 的设置。

2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

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

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

解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距

解决方案：使用float 为img 布局

5、IE9以下浏览器不能使用opacity

解决方案：

opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.