Description of the problem of hr tag in various browsers_HTML/Xhtml_Web page production

Generally, we rarely see HR, but once we see one, it can mean the difference between life and death. The same is true in HTML. We don't often see

---

, but the sight of it usually determines whether we can use the perfect dividing line. Here, I won’t attach pictures, just list them for reference:

	正常浏览器	IE6、7	Firefox
实际高度	height border-right-width border-left-width	height	height
背景色	background-color	background color(当高度<2px时，显示高度为灰色投影，需要color来设置颜色，相同于文字)	background-color

For example, if you want to create a dividing line with an actual height of 3px, four sides of 1px, a border color of #07f, and a color of other parts of #f60, you know:

Copy code

The code is as follows:

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 */

Is there any other more labor-saving solution?