对常见的css属性进行浏览器兼容性总结(推荐)

介绍对常见的CSS属性进行浏览器兼容性总结的攻略，具体流程如下：

步骤一：了解CSS属性的浏览器兼容性

首先，我们需要了解CSS属性的浏览器兼容性，以便在编写CSS时考虑到不同浏览器的差异。常用的网站包括caniuse.com和mdn，这些网站可以告诉我们使用不同CSS属性或属性值在各种浏览器中的情况。我们还可以使用CSS预处理器如LESS或Sass来处理浏览器兼容性问题。

步骤二：编写兼容性CSS代码

为解决特定浏览器的兼容性问题，我们可以使用以下方法：

• vendor前缀：在某些CSS属性上添加厂商前缀（例如：-webkit-）是一种解决浏览器兼容性的方法。但需要注意，厂商前缀需要在正确的地方加上，否则可能导致意外效果。此外，根据MDN的介绍，W3C现在更倾向于使用更标准化的方法，而非添加厂商前缀，因此对厂商前缀的使用需要慎重考虑。
• 浏览器嗅探（Browser sniffing）：通过检测用户正在使用的浏览器和版本来指定CSS代码，这种方法已经被认为是一种较差的做法，但在某些情况下仍可以用于解决特定的浏览器兼容性问题。
• Polyfill：这是通过JavaScript代码为浏览器提供新的特性，从而在旧浏览器上实现新的CSS特性的方法。Polyfill是可以使用的，但要特别注意使用的版本与目标浏览器版本之间的兼容性。

示例一：使用厂商前缀

假设我们要使用CSS3 box-shadow属性添加一个元素的阴影。但是，Internet Explorer只支持IE9及以上版本，而Firefox仅从4.0版本开始支持。在这种情况下，我们可以使用厂商前缀来解决兼容性问题：

.shadow {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=3);
}

在这种情况下，我们使用了CSS3 box-shadow属性和三个厂商前缀，以便兼容不同的浏览器包括IE9及以上版本。如果您希望在IE6-8上添加阴影效果，我们可以使用IE的滤镜属性（filter），但需要注意filter属性与其他属性的语法略有不同。

示例二：Polyfill解决浏览器兼容性

假设我们要为一个表格添加一些光栅线效果。在现代浏览器中，直接使用CSS3属性（如background-clip:padding-box）即可实现这一效果。然而，在一些旧版浏览器中无法支持这种属性，则使用Polyfill方法解决：

table {
    background: transparent; /* 确保Firefox中的光栅线准确 */
    border-collapse: collapse;
    border-spacing: 0;
}

tr {
    background-color: #fff;
}

td {
    border-radius: 0;
    outline: 0 none;
    padding: 10px;
    position: relative;
}

td:before {
    background-color: transparent;
    border-left: 1px solid #ddd;
    content: '';
    height: 100%;
    left: -5px;
    position: absolute;
    top: 0;
    width: 5px;
}

td:first-child:before {
    background-color: #ddd;
}

在这种情况下，我们使用在现代浏览器中已经被淘汰、但是在旧版浏览器中仍然支持的属性（如:before和position属性）。同时，我们使用了JavaScript代码，为旧版浏览器添加了CSS3属性background-clip: padding-box的支持，解决了兼容性问题。

结论

总的来说，兼容性问题是编写CSS时需要注意的重要问题。在解决特定的浏览器兼容性问题时，添加厂商前缀、使用浏览器嗅探、利用Polyfill等方法可以解决CSS在不同浏览器中可能出现的不同的显示效果。