The following workarounds use DIV tags instead of HR tags:
Workaround 1Use an HR tag that is contained inside a DIV tag. This provides better backward compatibility with browsers that do not support DIV tags or CSS. This is the recommended workaround.
Workaround 2Use the font-size style to provide the height for the DIV tag.
Workaround 3 Use an empty DIV tag inside a styled DIV tag to provide the height for the DIV tag.
The following sample code demonstrates the workarounds:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zero margin horizontal rule workarounds in Internet Explorer</title>
<style type="text/css">
<!--
div.RedRule {
border: 1px solid gray;
background-color: red;
height: 1px;
}
div.RedRule hr { /* for CSS1 browsers */
display: none;
}
div.RedRule * { /* for CSS2 browsers */
display: none;
}
-->
</style>
</head>
<body>
<h2>Zero margin horizontal rule workarounds in Internet Explorer</h2>
<p>There are three DIV tags. HR tags are inside for down-level compatibility.</p>
<div class="RedRule" style="background-color: blue;"><hr></div>
<div class="RedRule"><hr></div>
<div class="RedRule" style="background-color: blue;"><hr></div>
<p>There are three DIV tags. Height is specified by font-size.</p>
<div class="RedRule" style="font-size: 1px; background-color: blue;"> </div>
<div class="RedRule" style="font-size: 1px;"> </div>
<div class="RedRule" style="font-size: 1px; background-color: blue;"> </div>
<p>There are three DIV tags. Each one contains a DIV for height:</p>
<div class="RedRule" style="background-color: blue;"><div></div></div>
<div class="RedRule"><div></div></div>
<div class="RedRule" style="background-color: blue;"><div></div></div>
</body>
</html>
The document type definition (DTD) specification at the beginning of the sample code is required for Internet Explorer to support Workaround 1 and Workaround 3. This is because the border location of the DIV tag is treated differently based on the DTD specification.