I have a web application originally designed to target IE7. I am readjusting the CSS to make the app presentable in the latest version of Chrome without breaking it for IE7 users. I've fixed mis-aligned sliding door input boxes throughout the site but there is one page where I cannot get the sliding door to align in both IE7 and Chrome. The setup is very simple:
<span>
<input type="text" ... />
</span>
In this case the span holds the left cap of the sliding door and the input holds the right cap and body. I've styled both span and input as inline-block with the same height and no margins or padding. Chrome nails it and it looks great but IE7 is rendering the input 1 pixel lower than the span like so:
need more reputation to post images
If I add -1px of top margin to the input then IE7 renders the thing correctly and Chrome renders it misaligned. I've tried comparing this instance to all of the other sliding door inputs in the app that work in both IE7 and Chrome but I cannot for the life of me see what is different here....
Anyone run into a problem like this before?
There's almost certainly a better way to fix this, but without seeing it..
Add a class to the broken input such as "ie7fix", then:
/* applies to only ie7 */
*+html .ie7fix {
margin-top: -1px;
}