hr在浏览器中样式兼容性的设置

    今天给大家带来HTML中一个神奇的元素，HR。在网页中，HR是一个很常见的元素，但是由于浏览器兼容等问题，HR样式的设定却着实让人有点捉摸不透。所以，就HR的样式设定我来所一个简单的介绍吧。

1. 使用行内样式对hr进行布局，设置其宽600px，高10px,颜色为红色，

<hr color="red" width="600px"  size="10px" />

提示：在行内样式中，可以使用size来设置hr的高度，但是height属性却无法改变hr的高度。例如：<hr color="red" width="600px" height="10px" />，在浏览器中的显示效果如图：

很显然，高度在行内样式中的对hr无效。

2.使用CSS样式对hr进行样式设定的时候，浏览器将hr默认为是一个小的div,所以当用color对hr进行颜色改变时，大多数浏览器都显示hr的默认颜色，FireFox除外。
(1)当没有给横线设置高度时：

hr{
    width: 600px;
    color:red;
 }

在大多数浏览器显示如下：

FireFox中显示如下：

(2)当设置了hr的高度的时候：

hr{  
    width: 600px;
    color:red;
    height: 10px;
}

在大多数浏览器中显示如下：

在Firefox中显示如下：

3.所以根据hr样式的特性，如果我们想使用CSS样式将hr变成我们理想中的样子，就需要对它同时设置它的边框颜色(border-color)和背景颜色(background-color)

hr{
    width: 600px;
    height: 10px;
    border:1px red solid;
    background-color: red; 
}

效果如下图所示：

提示：在CSS样式中对hr高度的设置和行内样式正好相反，在CSS样式中使用size设置hr的高度是无效的，所以只能使用height。并且，我们可以通过对border-color和background-color不同颜色的设置，达到hr不同的显示效果，在这里就不在演示了。

以上就是关于hr样式设置的有关介绍，对hr设置border和background可以达到所有浏览器的兼容，大家可以动手试试！