The problem: What is the best way to replace a link with an image, keeping the link target aligned with the image (using a wrapper div if desired, because it is not going to be removed from the markup regardless of what decisions I make here)?
I had previously tackled this with by styling both the link and a wrapper div, because it wasn't within the scope of the problem to remove the wrapper div that existed in the site template anyway. See http://codepen.io/m2bn/pen/xbgZJQ. Then I tried streamlining the code by only targeting the link itself with the Leahy-Langridge padding-top overflow hidden method (http://codepen.io/m2bn/pen/JoEKoR). This made nice clean code but it didn't suit my particular use case for a couple reasons, see that example for details.
The method used here is the Radu Darvas shim, with a transparent gif. It's kind of ugly, but it's right for this particula