css - 新手的烦恼，怎么给<hr>元素设置粗细

Question

下面是HTML的问题部分：

<p id="main">
  <p>
    <h1>领先的 Web 技术教程 - 全部免费</h1>
    <p>*************</p><hr>
  </p>
</p>

下面是CSS的部分：

hr{
    height:2px;/*无效？？*/
}

本来想在文字底下设置分隔线，就用 <hr> 元素，现在想对 <hr> 标签设置粗细，没有反应？？CSS和HTML连接良好，其他样式设置都没有问题，求各位路过的好心人帮帮小弟，小弟正在入门阶段。

Answer 1

各瀏覽器對於<hr>元素的解析是有細微差別的。

具體到這裡來說，某些瀏覽器，例如FF，它的<hr>預設就是2px，一明一暗兩條線。所以設定2px是不會生效的。

試試修改：http://jsfiddle.net/ronesam/q02ba8qr/

解決方案：

hr {
    margin-top:7px;
    *margin: 0;
    border: 0;
    color: black;
    background-color: black; 
    height: 1px
}

其中：

1. margin-top:7px;*margin: 0;是解決ie和ff matgin-top不一致的問題；

2. border: 0; 是去除ff的一條陰影線；

3. color: black; 是設定ie舊版水平線的顏色；

4. background-color: black; 是設定FF下水平線的顏色；

5. height: 1px;是設定水平線的高度，當然你也可以把它設定2px，3px；

參考：http://www.css88.com/archives/942

PS：

• <p>標籤代表段落，裡面最好不要再有其它標籤；

• <hr>、<br>之類的空標籤，最好寫成：<hr />、<br />；符合規範，易於閱讀。

<p id="main">
  <p>领先的 Web 技术教程 - 全部免费</p>
  <p>*************</p>
  <hr />
</p>

Answer 2

雷雷

Answer 3

雷雷

Answer 4

第一點，hr標籤最好閉合，這樣寫

---

。
第二點如果分割線的話，可以使用裡面p元素的border-bottom屬性，這樣比較友好，而且樣式可以自訂