CSS倒影是網頁設計中一個很有用的效果，可以讓我們的頁面變得更加精美，但是在不同的瀏覽器上，CSS倒影的兼容性并不相同，我們需要考慮如何兼容不同的瀏覽器。

在CSS3中，倒影效果的實現非常簡單，只需要添加以下代碼：

.box {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
box-reflect: below 0px linear-gradient(transparent, rgba(255, 255, 255, 0.3));
}

然而，兼容性的問題不可避免。老的IE瀏覽器中不支持box-reflect屬性，我們需要使用IE的濾鏡來模擬倒影效果。

.box {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
box-reflect: below 0px linear-gradient(transparent, rgba(255, 255, 255, 0.3));
filter: progid:DXImageTransform.Microsoft.BasicImage(reflection=1, mirror=0);
}

通過將IE的濾鏡應用于box元素，我們可以實現所有瀏覽器中都能正常顯示倒影效果的目的。