在網站的開發過程中，我們經常會碰到一個問題：不同瀏覽器對 CSS 屬性的支持程度不一致。這就需要我們學習并使用 CSS 屬性的兼容性寫法。

在 CSS 語法中，我們可以使用“-”連接的屬性名來表示一個屬性的多個單詞，例如“font-size”。“-”連接有時候會被某些瀏覽器解析為錯誤，導致 CSS 樣式無法渲染。為了解決這個問題，我們可以在屬性名字母之間去掉“-”，并將后面的字母大寫，例如“fontSize”。

/* 傳統語法 */
p {
border-top-width: 10px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 5px;
}
/* 兼容語法 */
p {
border-width: 10px 5px;
}
/* 傳統語法 */
div {
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* 兼容語法 */
div {
border-radius: 10px;
}
/* 傳統語法 */
input[type="button"] {
color: #fff;
background-color: #339933;
border: 1px solid #006600;
}
/* 兼容語法 */
input.button {
color: #fff;
background-color: #339933;
border: 1px solid #006600;
}

還有一些屬性在不同瀏覽器中的表現也不同，我們需要針對不同瀏覽器編寫不同的樣式。

/* IE 9 以前 */
div {
background-color: rgb(255, 255, 255); /* fallback for IE */
background-color: rgba(255, 255, 255, 0.8);
}
/* 現代瀏覽器 */
div {
background-color: rgba(255, 255, 255, 0.8);
}

需要注意的是，寫 CSS 屬性的兼容性寫法不僅瀏覽器不同，不同的版本也可能有不同的表現。因此我們需要對不同的瀏覽器、不同的版本都進行測試和適配。