When one wants something that looks and feels like a horizontal ruler, it makes sense to use a horizontal ruler. However, if one wants tight control across browser-land, one will soon find out that old IE is doing its own things.
hr {
/* regular styling */
width: 300px;
height: 0;
border: none;
border-bottom: solid 1px #000;
margin: 0 auto;
}
* html hr {
/* overstyling IE6 */
display: block;
margin: -7px 0;
}
*:first-child+html/*/* /**/ hr {
/* overstyling IE7 */
display: block;
margin: -7px 0;
}
In IE7 (and older) the vertical space above and below an <hr /> is a stable 7px in addition to any declared margin, so 7px is the value we have to counteract.
For margins to work on the gap both above and below an <hr /> in IE7 (and older), we must add the
otherwise redundant display: block;.
Talk about ridiculous implementation, but at least it is controllable.
IE7 (and older) versions may also introduce stacking bugs and other nonsense that may ruin the appearance, unless
'hasLayout' is triggered on the outer containers – the darker gray areas containing
images and <hr /> above.
