Question

For example, if I make a block of four images that are absolutely positioned with 50% width and 50% height, the result in Internet Explorer looks like this:
http://img716.imageshack.us/img716/8376/96774641.png
The images are placed right next to each-other, as would be expected.

But the same code in Chrome produces this:
http://img560.imageshack.us/img560/7976/chrome.png
The images are shrunken slightely to make room for the spacing in-between.

My styles already include:

border-style: none;
border-width: 0;
padding: 0;
margin: 0;

… so why is Chrome spacing my images apart from each-other, and how can I fix it without altering the display for other browsers that render correctly in the first place?

EDIT: <link removed>
Be aware that the actual page is much more complicated, with over 1,000 <img> elements.
It will load slowly in any browser that is not hardware accelerated.
I have confirmed that FireFox renders it identically to IE8, with the images next to each-other as they should be.

Answer 1

This could be a rounding issue: A width of 50% may well end up as 223.5px for example.

Seeing as you’re using images with a fixed size, why not specify the positions in pixels as well?