About the compatibility of browsers in different versions of HR

HR tag, I believe everyone is familiar with it. We generally use it to produce a horizontal line effect. We can define "color", "height", "width", "border" and other styles for it.

Here we will only discuss the compatibility between "color" and "border" for different browsers.

Color:

Firefox, IE7 + =: specified by background-color.

IE6-=: specified by color.

Scheme: Specify the color for HR and use both background-color and color.

Border:

IE7 + =: If border: none is not specified, the browser adds a border with a certain width to HR by default.

IE6-=: the browser does not add borders to it by default.

Solution: Display declarative border: none.

Complete compatibilityCodeAs follows:

 1   <Style type = "text/CSS">  2   HR { 3  Border : None ; 4   Background-color : #060 ; 5   Color : #060 ; 6   Height : 2px ; 7   Width : 80% ;8 } 9   </Style> 

 1   <  Body  >  2       <  H1  >  3   Obama says Warren Buffett is right about taxes  4       </  H1  > 5       <  HR  />  6       <  P  >  7   Cannon Falls, Minnesota (Reuters)-small-town Americans probably don't make as much money as Warren Buffett, but they pay more of their income in taxes, president Barack Obama said on Monday, citing the billionaire investor to argue that the government needs more revenues to balance the budget.  8       </  P >  9   </  Body  > 

In addition, if you want to display dotted lines and other effects, you can do this:

 
1 HR {2 Height: 1px;3 Border: 0;4 Border-bottom: 1px dashed #000000;5}