主流浏览器css兼容问题汇总

下面就是“主流浏览器css兼容问题汇总”的完整攻略：

概述

随着不同浏览器的出现，每个浏览器都有其特定的CSS规则,这就使得在不同的浏览器中页面的样式可能会不一样。因此，解决主流浏览器的CSS兼容问题，成为Web前端开发中的重要任务。

具体步骤

1. 确定主流浏览器

我们需要确定目前主流浏览器的种类，以下为主流浏览器的名称：
- Chrome
- Firefox
- Safari
- Opera
- IE11 及以上

这些浏览器对于CSS的规则和实现存在一定的差异，所以在编写CSS时需要特别注意。

2. 清楚兼容问题

在实现页面的时候，我们需要结合浏览器规则和自己的需求来编写CSS，由于不同浏览器对CSS规则的实现有所不同，
故此时需要清楚兼容问题，才能更好地解决CSS兼容问题。

一些常见的兼容问题：
- 盒模型
- 浮动
- 定位
- 行高
- 表格样式
- 样式重置
- 选择器支持

例如: 对于 IE6/IE7 浏览器对于 CSS 样式中的 hack 处理:

/* IE6/IE7 */
* html #eleId{
    color:#f00;
}

3. 通过CSS Hack解决兼容问题

在清楚了兼容问题后，以前较多应用的方法就是通过 CSS Hack的方式来解决兼容问题。这种方式的原理是在CSS样式中添加一些特定的识别标识符，
使得不同浏览器可以更好地识别样式规则，从而兼容性问题得到解决。

例如: 清除浮动，使用“after”伪类:

.clearfix:after {content:"";display:table;clear:both;}
* html .clearfix {height:1%;}

4. 通过CSS3的Polyfill库解决兼容问题

现在CSS3的规范已经得到了普及，被广泛地使用。但是一些较老版本的浏览器并未完全支持CSS3。针对这种情况，我们可以使用一些Polyfill库，
从而实现对于较老版本浏览器的兼容。

例如: 借助本地loadStyle.js实现polyfill

<script src="../src/loadStyle.min.js"></script>
<script>
    // 通过loadStyle.js加载css3-mediaqueries.js文件
    loadStyle("../src/css3-mediaqueries.js", function() {
        console.log('css3-mediaqueries loaded');
    });
</script>

总结

CSS兼容性问题的解决方法有很多，随着技术的不断推进，新的兼容性问题也会层出不穷。
但经过对CSS Hack以及CSS3 Polyfill库的了解，我们可以在日常开发工作中更好地实现跨浏览器CSS的兼容性，从而有效提高Web应用程序的兼容性和浏览器兼容性。