問題現象

如下圖所示，textarea在firefox中顯示有內陰影。chrome瀏覽器中卻沒有這樣的效果。這是為何呢？

應用了同樣的樣式，為何在不同的瀏覽器中顯示的效果不盡相同？如何去除firefox顯示效果中的內陰影呢?

分析

我們將邊框的寬度加大，看看“陰影”是什麼？

從效果上看這個陰影應該是一種border-style。不同的瀏覽器中使用了不同border-style樣式。手動將border-style固化為solid, 如下所示: 

textarea {
    width: 400px;
    height: 100px;
    border-color
 
:#c0c4cc
    border-style:solid;
}

  陰影消失:

結論

 這個問題的根原是筆者在css中僅僅設定了border-color:#c0c4cc,未設定border-style和border-width，從而導致瀏覽器使用了不用的預設樣式，chrome瀏覽器預設使用了border-style:solid,而firfox瀏覽器使用了border-style:inset（inset border參考這裡）樣式。

推薦大家在定義border時同時設定border-width、border-style和border-color,。例如:

textarea {
    width: 400px;
    height: 100px;
    border: 10px solid #c0c4cc;
}

 從而避免瀏覽器的相容性問題。