Před pár dny jsem řešil stylování <hr/> tagu. V kódu je jednodušší použít jeden krátký element, než si zbytečně zaplácávat zdroják divy. To platí dvojnásob, když máme takových elementů půlku stránky. Na internetu jsem našel pár workaroundů, ale všechny byly dělané pro nahrazení obrázkovým pozadím. Vytvořil jsem tedy svoje vlastní – jednodušší řešení.

Hlavní problém tkví v tom, že většina prohlížečů má různé počáteční nastavení stylů jednotlivých prvků a speciálně <hr/> tag si každý vykresluje po svém. To se týká především zastaralých prohlížečů IE6 a IE7. Moje tzv. „cross-browser“ řešení vypadá takto:

hr {
  display:block;
  line-height:0;
  height:0;
  font-size:0;
  overflow:hidden;
  border:none;
  border-top:1px solid red;
  padding:0;
  margin:1px 0 0 0;
  _margin:-6px 0 -7px 0;
  *margin:-6px 0 -7px 0;
}

Jde především o vynulování základních stylů a pak si šikovným CSS háčkem ošetřit stejné vykreslování v IE6 a IE7 (poslední 2 řádky). Ostatním moderním prohlížečům (Firefox, Opera, Chrome, IE8 a novější) stačí styly nadefinované výše.

Takto nastylovaný HR tag by se měl vykreslovat ve všech prohlížečích stejně. Případné dostylování marginů provádějte zároveň i pro IE6 a IE7 CSS hacky.