Questions about & amp; lt; hr/& amp; gt; in various browsers

Generally, we rarely see HR, but it is possible to die and death. The same is true in HTML. We are not familiar with

Normal browsers IE6 and 7 Firefox
Actual height + border-right-width + border-left-width height
Background color background-color background + color (when the height is less than 2px, the display height is a gray projection, and the color must be set, the same as the text) background-color
For example, to create a dividing line with the actual height of 3px, the four sides of 1px, the border color of # 07f, and other colors of # f60, you know:

Hr {

Height: 1px;

* Height: 3px; color: # f60;/* for ie6 ie7 */;

Background-color: # f60;

Border: 1px solid # 07f;

}

@-Moz-document url-prefix () {hr {height: 3px ;}}/* for firefox */

Are there other solutions that are more labor-saving?