目前比较全面的浏览器CSS BUG兼容汇总

针对“目前比较全面的浏览器CSS BUG兼容汇总”的攻略，从以下四个方面进行详细讲解：

1. 如何寻找CSS兼容性问题

当我们在编写CSS样式时，不可避免地会遇到一些浏览器兼容性问题，主要表现为某些属性在不同浏览器下的展示效果会不一样。我们可以通过以下几种方式快速定位CSS兼容性问题：

• 使用浏览器的开发者工具调试，观察不同浏览器下的属性表现是否一致；
• 在网上搜索相关的CSS兼容性问题，一些开源社区或者工具网站上有较为全面的浏览器CSS兼容汇总列表，例如caniuse.com、CSS Tricks等；

• 可以使用一些 CSS Reset 的工具合理消除不同浏览器的样式差异，直接使用 HTML5 的 Reset 样式表也可以。

• 如何应对常见的CSS兼容性问题

2.1 较老版本的浏览器对于一些新属性的不支持

例如IE8以及IE8以下的浏览器对于HTML5的一些新属性不支持，可以通过以下方式解决：

/* 设置未知的元素的display属性为'block' */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
/* 设置HTML5表单元素的样式为默认样式 */
input[type='color'], input[type='date'], input[type='datetime'],
input[type='datetime-local'], input[type='email'], input[type='month'],
input[type='number'], input[type='password'], input[type='range'],
input[type='search'], input[type='tel'], input[type='text'],
input[type='time'], input[type='url'], input[type='week'], select, textarea {
  border-radius: 0;
  border: none;
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

2.2 不同浏览器对于盒子模型的解析方式不同

经典盒子模型及W3C盒子模型设置方式：

/* 经典盒子模型 */
* {
  box-sizing: border-box;
}
/* W3C盒子模型 */
* {
  box-sizing: content-box;
}

2.3 不同浏览器对于字体渲染方式的不同

不同浏览器对于字体渲染方式的不同可能会导致在不同浏览器中显示的字体大小以及字体粗细等属性不一致，可以通过设置抗锯齿、字体平滑等属性解决：

/* 抗锯齿 */
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale;
/* 字体平滑 */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

1. 常见浏览器CSS兼容性问题的解决方案

3.1 外边距重叠问题的解决

外边距重叠是CSS中经常遇到的问题，常见的解决方法有：

• 使用padding代替margin；
• 使用relative或absolute定位；
• 使用浮动解决。

3.2 清除浮动的问题

在一些容器内部，多个需要浮动的元素排列，在浮动元素多了之后，容器的高度不再自适应浮动元素，出现摆放错误的问题。解决方法有：

• 使用clearfix清除浮动；

• 在浮动元素的外层套一个容器，使用overflow:hidden；

• 示例说明

我们使用Flexbox进行页面布局，在不同浏览器下可能会出现Flexbox布局不生效的问题。我们可以针对不同浏览器进行兼容性设置：

/* Safari */
@supports (display: flex) {
  div.container {
    display: flex;
  }
}
/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  div.container {
    display:-webkit-flex;
    display:flex;
  }
}
/* IE */
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  div.container {
    display:-ms-flexbox;
    /* 其他IE浏览器兼容性设置 */
  }
}

另外一个常见的问题是不同浏览器对于border-radius属性的解析不一致，解决方法如下：

/* 其他浏览器 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/* IE9及以下版本 */
behavior: url(pie.htc); /* PIE.htc文件可以引用jquery或直接下载引入 */

以上就是关于“目前比较全面的浏览器CSS BUG兼容汇总”的攻略，希望能够对您有所帮助。