Is the rendering of the Chrome inline block (webkit?) Incorrect? How can I align this layout?

Question

I have a layout that consists of an input type = "text", followed by (on another line): a (link) containing img. I cannot change this because it is generated by another application, but I can style the elements.

EDIT: Some alias for those who cannot read prose, as well as some additional details:

<td class="a"><!-- parent container--> <input type="text" class="b"><!-- always here --> <a class="c"><!-- sometimes here, sometimes not--> <img> </a> <div></div><!-- sometimes has content, sometimes doesn't --> </td> 

What happened: if I tried to use the built-in blocks, and in the absence of margins, indents or positioning, all non-website browsers shifted the top of the image equally above the input, allowing me to fix the vertical alignment using relative positioning. Chrome, on the other hand, looked as if I were using the: inline display instead of the inline block, placing the image below the input.

END OF EDITING

What I need to do is align the text and the image perfectly, side by side (horizontally). Floating to the left is not an option, because it breaks down the elements that appear next, which I also can’t control.

When I tried to use the inline block, which is an obvious solution to this problem, I was able to fully work on the latest versions of Firefox 8 and IE 9. However, using the same styles, Chrome displays as inline instead of the inline block, which destroys everything.

Is this a known issue? Does anyone know a way to agree on this arrangement? I believe that I need to be friendly to IE7, so the use of table cell screens, by the way, cannot be either.

EDIT:

Thanks for the comments using some collapsed selector combinations. I managed to select the div element after a> img and add clear: both. This allowed me to get rid of the display of the built-in unit in favor of floating to the left, only to find out that it is still broken in chrome (works fine in other browsers), this time because chrome does not seem to allow empty / hidden containers to affect the layout, in clear violation of the standard.

I will never understand why there are developers who like chrome, everyone who works on the creation of automatically created layouts should face standard problems every day. I know that I know.

CONFIRM attempts to set the vertical alignment of text input and img with the same height:

First attempt: in my specific situation (perhaps it was caused by the nested containers inside which it was, but this is definitely a Chrome or Webkit bug). The embedded unit was displayed as embedded.

The second attempt: using blocks and floating elements to the left made the block after that appear on the same line as this layout. The choice of this block was possible, but although clear: both placed it below the location where it belonged, again a Chrome or Webkit error stopped it from working without resizing the main container (overflow: hidden) to contain the entire block size, including fields (works in other browsers).

Third attempt: using min-height: on the container to simulate the height offset that should have been caused by the edge of the inner block, even if it is hidden. Chrome / Webkit just ignored this.

The final solution (crutch): set a fixed absolute height: on the main container.

Answer 1

The inline-block element depends on white space, so it would be enough to remove all the spaces between the elements - the result should look like this:

 <td class="a"> <input type="text" class="b"><a class="c"><img> </a><div> </div> </td> 

Answer 2

If possible, just set the input width and img to the width: 50%; and put them or maybe add css3 img: after {content: ''; clear: both;} with clear: both?

But in these situations, I would use javascript and jquery to play with these elements, and I could not disable javascript on chrome, so you would be good in all scenarios!