[分享]css兼容所有浏览器代码怎么写

CSS是前端网页开发中不可或缺的一部分，用来美化网页的外观和版面。但是由于不同浏览器的渲染引擎不一样，CSS的兼容性经常会遇到问题。那么如何写出能兼容所有浏览器的CSS代码呢？下面分享一些技巧和方法。...

CSS是前端网页开发中不可或缺的一部分，用来美化网页的外观和版面。但是由于不同浏览器的渲染引擎不一样，CSS的兼容性经常会遇到问题。那么如何写出能兼容所有浏览器的CSS代码呢？下面分享一些技巧和方法。

1. 使用浏览器前缀

.example{
    -webkit-transform: scale(1.5); 
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
} 

2. 避免使用CSS3新特性

.example{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
} 

3. 使用reset或normalize.css

/* reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* normalize.css */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 

/* 略 */ 

4. 使用Hack

.example{
    color: red; /* 其他浏览器 */
    _color: yellow; /* IE6 */
    *color: blue; /* IE7/IE8 */
    +color: green; /* IE7 */
} 

5. 使用flexbox和grid布局

这两种布局可以有效替代一些传统的布局方式，而且兼容性也比较好。

.example{
    display: -webkit-box; /* 将此改成你需要的flex或grid */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
} 

总之，写兼容所有浏览器的CSS代码需要我们综合运用多个技巧和方法，并及时了解最新的CSS规范和前端开发的趋势。