CSS 是網頁設計中非常重要的一個組成部分。其中高度是一個非常重要的屬性，但我們時常會面臨著高度兼容的問題。本文將會介紹一些如何寫高度兼容的 CSS 的方法。
首先，我們需要知道不同的瀏覽器對于高度的解析不是完全一致的。有的瀏覽器會自動給元素設置一些默認值，有的則不會。因此，為了兼容不同的瀏覽器，我們需要規范化不同元素的高度。具體做法是在相應的元素上設置 height 屬性。
下面是一些常用的元素以及它們的高度屬性設置：

/* 設置 div 元素的高度 */
div {
height: auto;
}
/* 設置 span 元素的高度 */
span {
display: inline-block;
vertical-align: middle;
height: 30px;
}
/* 設置 a 元素的高度 */
a {
display: block;
height: 50px;
}

需要注意的是，對于一些行內元素，如 span 和 a 元素，我們需要將它們的 display 屬性設置為 inline-block 或 block，才能使它們的高度屬性生效。
其次，我們還需要對于高度的單位進行正確的選擇。在 CSS 中，有 px、em、rem 等多種單位。其中，px 是絕對單位，而 em 和 rem 是相對單位。相對單位可以比較好地兼容不同設備的屏幕和字體大小。
下面是一個以 em 為單位的例子：

/* 設置 div 元素的高度 */
div {
height: 10em;
}

最后，我們還可以使用一些 CSS 框架，如 Bootstrap，來幫助解決高度兼容的問題。這些框架內置了各種兼容性解決方案，可以使我們更方便地編寫好看兼容的 CSS。
綜上，寫好高度兼容的 CSS，需要我們考慮顏色、單位、樣式等多方面的因素。在實際開發中，我們還應當結合具體設計需求，采用合適的策略來編寫 CSS。