Image shifts down when using .ir with inline-block 'a' tag

[thamas]

I use .ir as a Compass mixin (squish-text). I applied it to an link. But I had to override the line-height, otherwise the image shifted down. It seems to be the same issue, as mentioned in:

#1108 (comment)

My code looks like this:

a {
    @include squish-text;
    background: url("../images/integralvision.png")no-repeat 0 0 transparent;
    display: inline-block;
    line-height: 30px; // need to override sqish 0 value to be inline
    height: 18px;
    width: 104px;
  }

[drublic]

@thamas, sorry for the delay on this issue.

As @necolas states in the post you mentioned we should rethink the image-replacement technique before launching the next version of HTML5 BP. Just wanted to let you know that we are aware of the issues and will work on it.

Thanks for the heads up!

[thamas]

OK. Thanks for the information!

[necolas]

Will be addressed as part of a wider reassessment of the IR technique. Another approach for your case is to change the vertical-align value instead.