Internet Explorer Anchor Image Bug

Internet Explorer has a CSS bug putting a border around an <img> when using it inside an anchor.

The issue is specific to floating images and only manifests when a border is applied while hovering. The following CSS definition should cause a border to appear around an image when hovering over it with the mouse:

   a:hover img  { 
      border:2px solid red; 
   }

   img { 
      float:left; 
      border:2px solid white; 
   }

If there is no default a:hover defined, no border at all will appear as seen here. If there is a default a:hover, such as:

   a:hover { color:red; }

then only a partial border appears around the top of the image as seen here.

The only workaround I’ve been able to find is to include an zero-px border for the default a:hover. Adding this to the style fixes the problem:

   a:hover { border:0px; }

See the working example here. This site employs this fix.