css3兼容问题解决 |css表格 magin

css广告跟随，css li取消样式，css3 perspective 理解，css图片超出宽度隐藏，css+div的子元素，js css转换成图片，css表格 magin css3兼容问题解决 |css表格 magin

使用前缀

/* 使用浏览器前缀 */
div {
-webkit-transition: all 1s; 
-moz-transition: all 1s; 
-o-transition: all 1s; 
transition: all 1s;
}

可以看到，这段 CSS 代码中使用了包含浏览器前缀的 transition 属性。这样可以使得不同的浏览器支持 CSS3 功能，但是这种方法需要添加很多 CSS 代码，会让代码显得很冗杂，增加了出错的几率，所以在实际开发中使用并不广泛。

使用垫片

/* 引用normalize.css *//* 引用autoprefixer */
npm install postcss-cli autoprefixer -D
npx postcss main.css -o output.css --use autoprefixer

对于 CSS3 兼容性问题，还有一个更为推荐的解决方案，那就是使用垫片。垫片是一种能够在浏览器中填补缺失的 CSS 标准和功能的工具。normalize.css 是一个比较好的垫片 CSS 库，它可以帮助大家重置浏览器默认的样式，让同一样式在不同浏览器的表现尽可能的接近。

autoprefixer 是另一个非常好的垫片 CSS 库，它的作用是自动为 CSS 属性添加前缀，因此可以降低添加前缀的负担，减少了代码量。由于使用 CSS 垫片的方法简单明了，而且使用起来不会增加过多的代码，所以它也是应对 CSS3 兼容性问题的最常用方法。