The Perfect browser-compatible
HR：
height:1px;
Border:none;
border-top:1px solid Black;
margin:0;
*margin:0 0-14px 0;
Float:none;
*float:left;
Display:block;
The 1.hr element is a block-level element that is a box that has border
2. Height:
sizeAnd
Style.height.
IEAnd
FirefoxThe size is interpreted and calculated differently, so it's best not to
sizeUse
Height, but there will be a border
Box, so will
Border:none.
FirefoxIt's under.
sizeIt's solid.
Box, not just an ordinary block-level element.
3. Color:
ColorAnd
Style.border-color
HeightIf not greater than
2pxThe difference between these two attributes is not visible.
Firefox: Color=border-color, when the height is greater than 2, there will be a
The Hollow Box。
IE: Yes
Border-colorNot recognized, to use
border:1px Solid Black;
4. Margin
HR in
no default margins under Firefox(It can be eliminated even if it is useful margin:0)
HR has default top margin 14px and bottom margin 14px (even margin:0) under IE, use float to eliminate margin-top (please use *float, or use width and then float.)
Then in the use of CSS hack to the IE set a margin-bottom:-14px, so that the following elements will move up 14px, as if the HR below the margin to eliminate a bit.
Ps:hr in Firefox is incredibly rounded, and if you set the HR height and width of the same value, you can get a circle (solid or hollow) Oh.
In fact, the HR as a div is also used, but also a different browser parsing has a very big difference in the strange div, so using HR is not as direct as the border of Div.
