css相容性處理方式有：1、對樣式初始化；2、新增瀏覽器私有屬性，如【-moz】代表firefox瀏覽器私有屬性；3、使用自動化插件，如自動管理瀏覽器前綴的插件Autoprefixer。
處理方法：
一、樣式初始化
（學習影片推薦：css影片教學）
每個瀏覽器的css預設樣式不盡相同，所以最簡單有效的方式就是對其進行初始化
* {
margin: 0;
padding: 0;
}如果不知道該初始化什麼，推薦一個初始化CSS樣式庫normalize.css，選取展示其中幾個樣式設置，如下：
html {
line-height: 1.15; /* Correct the line height in all browsers */
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}
body {
margin: 0;
}
a {
background-color: transparent; /* Remove the gray background on active links in IE 10. */
}
img {
border-style: none; /* Remove the border on images inside links in IE 10. */
}二、新增瀏覽器私有屬性
-moz- 代表firefox瀏覽器私有屬性
# -ms- 代表IE瀏覽器私有屬性
-webkit- 代表chrome、safari私有屬性
-o-代表opera私有屬性
#對於私有屬性的順序要注意，把標準寫法放到最後，相容性寫法放到前面
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/ -moz-transform:rotate(-3deg); /*为Firefox*/ -ms-transform:rotate(-3deg); /*为IE*/ -o-transform:rotate(-3deg); /*为Opera*/ transform:rotate(-3deg);
三、使用自動化插件
Autoprefixer是一款自動管理瀏覽器前綴的插件，把Autoprefixer添加到資源構建工具（例如Grunt）後，可以完全忘記有關CSS前綴的東西，只需按照最新的W3C規範來正常書寫CSS即可
//我们编写的代码
div {
transform: rotate(30deg);
}
// 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置
div {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}webpack 中配置postcss-loader 和postcss-preset-env 也可以處理相容問題
module: {
rules: [{
test: /\.css$/,
use: [
// 这个 loader 取代 style-loader。作用：提取 js 中的 css 成单独文件
MiniCssExtractPlugin.loader,
// 将 css 文件整合到 js 文件中
'css-loader',
//修改 loader 配置
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
// postcss 的插件
require('postcss-preset-env')()
]
}
}
]
}]
}
// package.json
"browserslist": {
//开发环境配置
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
//生产环境配置
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}相關推薦：CSS教學
以上是css相容性有哪些處理方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
