Internet Explorer’s CSS background-image rendering bug

A rendering bug with the CSS property background-image in IE

I spent all last week redesigning a web application and ran into some very strange
 behavior in Internet Explorer. I made a table with a thin border, drawn
 using a background image on the outer cells. For this I used
 background-image

The CSS class that set the background looked like this.

.line{
 	background-image:url("../img/line.png");
 	background-repeat:repeat-y;    
  }

I applied the class to the outer cells. Here’s where the trouble started.
 Quite often the table would appear without the background image.
 You can see what I mean in the 
 incorrect rendering and the 
 correct rendering.
 This very annoying visual glitch happened at random. At first I suspected the PNG
 image format, but that turned out to be a dead end. As I investigated, I noticed another oddity.
 Moving the mouse over the affected area or selecting text there made the background
 appear correctly at once. In other words, anything that forced the browser to repaint the area fixed the rendering.

Conclusion and workaround

This suggests that if we make the browser repaint the page or the container,
 the background set with background-image will render correctly.
 I solved it with a simple hack. On the onload event, I combined
 the DOM and CSS to set display to block on the element surrounding
 the table. That forced the browser to repaint the area and display
 the background correctly.

The code is very simple.

document.getElementById('nadrazeny-kontejenr').style.display='block'