jQuery Accordion Internet Explorer IE CSS Issue

jQuery Accordion Internet Explorer IE CSS Issue

Hello,
 
I'm testing the jQuery accordion with a custom theme (via theme roller) in Firefox and Internet Explorer. Firefox looks goods and works well, whereas IE works well but the CSS is not correctly formed.
 
I suspect this has little to do with jQuery and plenty to do with my understanding of IE and/or a rookie mistake.
 
My accordion is thus...
 
   <div id="accordion"> 
    <h3>First Header </h3>
    <div><p>First content</p></div>   
   
    <h3>Second Header </h3>
    <div><p>Second content</p></div>   




   
   </div>
 
For tidiness I dynamically insert anchors, and then initialise the accordion, all at the foot of the page like so...
 
 $(function() {
  $("div#accordion h3")
   .wrapInner("<a href='#'>");
  
 });


 
 $(document).ready(function() {
  $("#accordion").accordion();
 });

 
Naturally I've included the relevant jQuery scripts and CSS theme file in the <head>. So, nothing complicated.
 
In Firefox the accordion works fine and the CSS renders correctly, but in IE the CSS does not.
 
Looking at the page source in FireFox we see...
 
<div role="tablist" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" id="accordion"> 
 <h3 tabindex="0" aria-expanded="true" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top"><span class="ui-icon ui-icon-triangle-1-s"></span><a tabindex="-1" href="#">First Header</a></h3>
    <div role="tabpanel" style="height: 112.8px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"><p>First content</p></div>   
   
    <h3 tabindex="-1" aria-expanded="false" role="tab" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"><span class="ui-icon ui-icon-triangle-1-e"></span><a tabindex="-1" href="#">Second header</a></h3>
    <div role="tabpanel" style="height: 112.8px; display: none;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"><p>Second Content</p></div>
</div>





 
 
But looking at the page source in IE we see...
 
   <div id="accordion"> 
    <h3>First Header </h3>
    <div><p>First content</p></div>   
   
    <h3>Second Header </h3>
    <div><p>Second content</p></div>   




   
   </div>
 
That is, no anchors added and no theme UI classes added. And yet, the sliding accordion does work in both FF and IE. Can anyone shed some light on this?
 
Thanks.