在前端开发中,兼容性一直是一个非常重要的问题,特别是在 CSS 样式的编写中,对不同浏览器之间的差异进行适配,是一个必须要面对的问题。
那么,CSS 怎么解决兼容呢?下面,我们来简单介绍一下:
//1.加前缀 .box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } //2.使用hack .box{ width:200px; height:200px; background-color:red; /* IE6以下生效,其他浏览器失效 */ *width:300px; *height:300px; /* IE7生效,其他浏览器失效 */ _width:400px; _height:400px; /* IE6及以上生效 */ +width:500px; +height:500px; /* IE6~IE8生效,其他浏览器失效 */ /* 请注意,下面的hack并不建议使用 */ /* IE6及以上生效,万能hack */ +width:expression(document.documentElement.clientWidth>1024?"1024px":"auto" ); } //3.使用Normalize.css//4.使用reset.css
以上是 CSS 解决兼容性的常用方式,具体的选择可以根据项目实际情况进行决定。同时,养成代码兼容性良好的习惯,也是很重要的。