分隔線的CSS

分隔線的CSS

前言

  最近在用CSS調整分隔線的顏色，在Chrome還沒問題，但到了Firefox就不太正確，在此把研究結果做個紀錄。

內容

  用CSS提整分隔線的顏色，範例如下

hr
{
  border-top:1px solid rgb(255,0,0);
}

這段範例在Chrome沒問題，但到了Firefox後換看到下圖

在FireFox用範例的CSS調整的分隔線

感覺下方會多一條灰色的線，在Styling <hr> with CSS裡找到分隔線有個"border"屬性，將它調整成"0"後，如下

{
  border:0;
  border-top:1px solid rgb(255,0,0);
}

調整後就可以得到和Chrome一樣的效果，而且這段CSS在Chrome也能正常動作。

  這是我第一次碰到CSS的相容問題，google了一下發現相容的問題還不少，以後有機會再研究研究。

參考資料

W3School_How TO - Style HR
Styling <hr> with CSS