CSS（層疊樣式表）是網頁設計和開發中必不可少的一部分。它為網站提供了樣式和布局，讓網頁更加美觀和易于使用。然而，由于瀏覽器之間的差異，不同的瀏覽器對CSS支持的程度不同，這給前端開發帶來了很大的挑戰。

在編寫CSS代碼時，我們要考慮到所有主要的瀏覽器，例如Google Chrome，Mozilla Firefox，Microsoft Edge和Safari。這些瀏覽器之間存在一些差異，這可能會影響我們的CSS代碼表現。以下是一些跨瀏覽器兼容性問題和解決方案：

/* Google Chrome 89+ */
.box {
display: flex;
gap: 1rem;
}
/* Mozilla Firefox 86+ */
.box {
display: flex;
}
.box > * + * {
margin-left: 1rem;
}
/* Microsoft Edge 81+ */
.box {
display: flex;
}
.box > *:not(:first-child) {
margin-left: 1rem;
}
/* Safari 14+ */
.box {
display: flex;
}
.box > * {
margin-right: 1rem;
}
.box > *:last-child {
margin-right: 0;
}

這些代碼塊展示了如何在Google Chrome，Mozilla Firefox，Microsoft Edge和Safari中創建相同的布局。在Google Chrome中，我們可以使用gap屬性輕松創建間距。在Mozilla Firefox中，我們需要使用 + 選擇器來設置元素之間的間距。在Microsoft Edge中，我們可以使用:not選擇器來排除第一個子元素，以便為其余的元素設置間距。在Safari中，我們需要為每個元素設置右側的間距，并使用最后一個子元素的選擇器來移除最后一個元素的間距。

在編寫CSS代碼時，我們還應該考慮不同瀏覽器對CSS屬性的支持程度。例如，某些新屬性只被最新版本的瀏覽器支持，而舊版本的瀏覽器可能不支持它們。我們可以查看MDN Web Docs以獲取更多信息，還可以使用CSS前綴來為不同版本的瀏覽器提供自定義的CSS。

總之，跨瀏覽器兼容性是我們在編寫CSS代碼時必須了解和解決的一個問題。我們需要調整我們的代碼，以便在所有主要瀏覽器中得到相同的效果。通過仔細規劃和測試，我們可以創建出美觀和兼容的網頁。