CSS Safari / Chrome Positioning Anomaly

Question

See the following example:

http://6329195.com/stackoverflow/css_li_weird/index.html

If you refresh the page, from time to time one of the images will move downward so as not to noticeably coincide with the others. It doesn't seem to be happening in Firefox. This happens only once every few minutes. Most often this happens with the last image, but it can happen any / several times at a time. You can see a screenshot of the problem:

http://6329195.com/stackoverflow/css_li_weird/screenshot.jpg

Can someone tell me what is wrong / why is he doing this?

(The list is ultimately used for jQuery slideshows, hence the empty href in the tags)

Answer 1

A similar answer to the question made me try vertical-align: top; which seems to work. So, if for some reason you need to keep overflow:hidden; then this can be a way to prevent failure / error.

Working example: http://jsfiddle.net/rtppE/2/

 li.productMenuItem{ vertical-align: top; width: 45px; display:inline-block; list-style: none; height: 45px; overflow: hidden }