textarea在firefox瀏覽器中邊框內陰影的消除辦法

問題現象

以下圖所示，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;
}

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