A stripe should be a stripe

Everybody who develop or design for the world wide web knows this problem: cross browser compatibility. Since the new IE9 it’s getting much more better, but if you have to create a website, which should have pixel to pixel the same view in all browsers, you have a real problem, because every browser has its own properties. The smaller the differences are, the more difficult is it to fix the failing pixel differences. The best example is the <hr /> Tag. This tag is a line in nearly all browsers. but if you want to manipulate this tag with css, you can see, that there is a difference in one single browser: The Safari Browser on Mac OS.

hr {
  height: 2px;
  color: black;
}

In all other Browsers the hr tag with this css manipulation is a line with a height of 2 pixels and a black color. Only in the safari browser on mac OS it is a table cell with the height of 2 pixels, a one pixel high border in black color and a white background. To create this hr tag absolute cross browser compatible, following css is necessary:

hr {
  height: 2px;
  color: black;
  border: none;
  background-color: black;
}

Then the hr tag is a 2 pixel high line in all browsers.