hr tags cross-browser

Home

The <hr> tag is rendered differently by different browsers. You could try styling it with CSS, but even that gets mucked about by some browsers. You could use just a styled div instead, but then you'd lose the semantics. The easy way to get a consistent look for your <hr> tags while maintaing semantics is to wrap them in styled divs and hide them, like this:

<style type="text/css">
.hr { 
  line-height: 1px; /*needed for IE/win*/ 
  font-size: 1px; /*needed for IE/win*/ 
  height: 1px; 
  background: #aaa; 
  margin: 15px 0; 
} 
.hidden {
  display: none;
} 
</style>

<div class="hr"><hr class="hidden"></div>
    

This is how it looks: