Collapsible field images don't show in IE6

I've been putting a new site together using the Meta Theme. One thing I noticed was that the collapsible/dropdown fields showed the arrow3.gif and arrow3d.gif just fine in Firefox but never appeared in IE6. The collapsible menus in blocks work fine but not the fields in the main page area. I dug into the css a bit and found the trouble area in the pagestyles.css file:

#contentarea-middle2 fieldset.collapsible { border: 1px solid #999; }
#contentarea-middle2 fieldset.collapsible legend a {
  padding-left: 15px;
  background: url('images/arrow3d.gif') 0 50% no-repeat;
  }

#contentarea-middle2 fieldset.collapsed { border: 1px dashed #999; }
#contentarea-middle2 fieldset.collapsed legend a {
  padding-left: 15px;
  background-image: url('images/arrow3.gif');
  }

I found that if I insert html.js as shown below, the images will show up in IE6 and still work with Firefox.

#contentarea-middle2 fieldset.collapsible { border: 1px solid #999; }
html.js #contentarea-middle2 fieldset.collapsible legend a {
  padding-left: 15px;
  background: url('arrow3d.gif') no-repeat 0px 50%;
  }

#contentarea-middle2 fieldset.collapsed { border: 1px dashed #999; }
html.js #contentarea-middle2 fieldset.collapsed legend a {
  background-image:url('arrow3.gif');
  }

Should this change be made to the css going forward or will it break something else?