title: JQuery icon does not render in IE9
body: <p>I have a cancel button defined as follow:</p>
  
  <pre><code>&lt;td&gt;
      &lt;br /&gt;
      &lt;a id="btnClear" class="custom_dialog_link ui-state-default ui-corner-all" href="#"&gt;
          &lt;span class="ui-icon ui-icon-cancel"&gt;&lt;/span&gt;Clear &lt;/a&gt;
      &lt;br /&gt;
  &lt;/td&gt;
  
  &lt;li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"&gt;&lt;span class="ui-icon ui-icon-cancel"&gt;&lt;/span&gt;&lt;/li&gt;
  </code></pre>
  
  <p>In IE9 it rendered as below. I tried on FF… the same. </p>
  
  <p><img src="https://i.stack.imgur.com/D8XI1.jpg" alt="enter image description here"></p>
  
  <p>If I set compatibility mode, it rendered correctly as below:</p>
  
  <p><img src="https://i.stack.imgur.com/tuSbn.jpg" alt="enter image description here"></p>
  
  <p>I googled the problem, someone recommended add style="display:inline-block". I tried, it rendered as </p>
  
  <p><img src="https://i.stack.imgur.com/GyBEr.jpg" alt="enter image description here"></p>
  
  <p>But in compatibility mode, it basically shows nothing. </p>
  
  <p><img src="https://i.stack.imgur.com/nuFmX.jpg" alt="enter image description here"></p>
  
  <p>Does anyone know what is going on here? I would like the button is rendered as the second one, in regular or compatibility mode. Is it possible?</p>