Why is display:inline killing IE 8.0 performance?

Question

I have an image gallery based on this jQuery plugin:

http://jqueryfordesigners.com/demo/slider-gallery.html

This works really well in Firefox, Chrome and even IE 7.0, but when I try it with more than 50 images in IE 8.0 the performance is incredible slow. Just hovering over the thumbnail brings the CPU load to 100%.

At first I thought it's a Javascript problem, so I used the IE profiler, but the results were normal. Next I checked the CSS and finally found the cause:

.sliderGallery UL LI { display: inline; }

This gets the thumbnails to align horizontally. If I chance it to display:block, performance is fine and the scroller is still working but obviously it looks funny, because the thumbs are aligned vertically.

My questions:

1. Why does IE 8 have this problem with many display:inline elements
2. What can I do to solve it

I'll gladly provide more information if necessary.

Answer 1

You could try having:

display: inline-block;

instead of display: inline;

Lemmie know if this works.