[分享]css个浏览器兼容代码

在进行网站开发过程中，我们常常会遇到不同浏览器对CSS的解析方式不同从而导致网站样式失调的情况。这时候我们需要在CSS代码中加入特定的浏览器兼容代码来保证网页在不同浏览器下的正常显示。以下是一些常用的...

在进行网站开发过程中，我们常常会遇到不同浏览器对CSS的解析方式不同从而导致网站样式失调的情况。这时候我们需要在CSS代码中加入特定的浏览器兼容代码来保证网页在不同浏览器下的正常显示。

以下是一些常用的CSS浏览器兼容代码，你可以根据需要选择使用。

/* IE浏览器兼容代码 */
.box {
    -ms-border-radius: 5px; /* IE9及以上版本 */
    -webkit-border-radius: 5px; /* Safari和Chrome */
    border-radius: 5px;
}

/* Firefox浏览器兼容代码 */
.box {
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* Chrome、Safari、Opera浏览器兼容代码 */
.box {
    -webkit-box-shadow: 2px 2px 5px #999;
    -moz-box-shadow: 2px 2px 5px #999;
    box-shadow: 2px 2px 5px #999; /* IE9及以上版本也支持 */
}

/* IE浏览器兼容代码 */
.box {
    -ms-linear-gradient(top, #ffffff, #f27a3d); /* IE9以上版本 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f27a3d'); /* IE6-8版本 */
    background: #f27a3d; /* 其他浏览器 */
} 

除了上述示例中的兼容代码之外，还有许多其他的兼容代码，比如针对移动端浏览器的兼容代码、针对国内特定浏览器的兼容代码等。在使用这些兼容代码时，我们需要尽可能地保持代码的简洁与优雅，避免出现冗余代码和浏览器判断过多的情况。