Hr (horizontal line) style in FireFox vs IE vs Chrome - Simplest Simple feature doesn't work same - Hope you can save some time.

ISSUE:
I wasted few minutes figuring out World's simplest simple issue 'drawing a single line' with 1pixel width and a color in html that looks same in at least 3 browsers ( Firefox, IE, Chrome )

I just want to do a simple  code like,

 <hr style="color:#ff6a00; " > 

- Firefox: Shows the line with given color but with a border. (Thats good. 4 Stars for Firefox team)

- IE: Shows line with default 'gray' with default width

- Chrome: Shows line with default 'gray' with default width

---

(depending on the browser you are looking - the above line will show as mentioned above)

<hr style="color:#ff6a00;  height: 1px; border: 0; width: 100%; " > 

---

All 3 Browsers: No Show - No line
Even if you try increasing border and height, 

<hr style="color:#ff6a00;  height: 10px; border: 3px; width: 100%; " >

it will not show the line.

FIX: 

You have to use the background-color: #ff6a00; attribute to draw the line!

 <hr style="color:#ff6a00;  background-color: #ff6a00; height: 1px; border: 0; width: 100%; " > 

---

I have no idea why this has to be this way for a simplest simple horizontal line in html. Imagine how many hours of designers and developers wasted unproductively if you just have to make a simple line work like the same in all the 3 browsers. Good lesson for designers as well as for the companies to see how simple things will drag your productivity.