Please sign in to comment.
New image replacement approach
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. Known advantages: * 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`). Known issues: * 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 IR anyway). * 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 techniques. Fix gh-1149
- Loading branch information...
Showing with 16 additions and 8 deletions.