This approach uses a pseudo-element to force the element's content
downwards without covering the background of the element. The overflow
is hidden. For IE 6/7, fallback to the cruder `text-indent` method.
* Works in IE6+ (although better in IE8+).
* Replaces any content in IE8+, including inner HTML.
* Nothing new for people to learn. Works just like all "traditional" IR
techniques (unlike NIR, which needs you to add the image using a
pseudo-element's `content` and relies margins for sprite positioning).
* Doesn't draw a large out-of-element box in modern browsers. You can
even mix in something like `font: 10px/1 a` to reduce ce the size of
the "off-screen" box, if you really need to.
* Doesn't have any potential SEO problems from `font-size:0`.
* Doesn't care about any minimum font-size that a browser might have.
* Doesn't have any potential failed-IR problems from inherited styles,
like text being positioned within the element's visible box (i.e., if
you use other properties like `text-stroke`).
* Doesn't work when images are off or fail to load (same as every other
IR technique apart from NIR).
* If the IR'ed element has bottom-padding, then either it needs to be
removed or the height of the pseudo-element needs to be bumped up
(e.g., set to 200%).
* Doesn't avoid the `inline-block` bug in IE 6/7 due to the text-indent
fallback for those browsers.
* Doesn't work on input elements (but they shouldn't be the subject of
* There is the potential for some final-result differences between
IE 6/7 and modern browsers, but this is already the case with other IR