title: JQuery method .before() or .insertBefore() on IE7
body: <p>I am trying to insert a color div before a checkbox, using <code>.before()</code> method of jQuery 1.5.1, which runs alright on FF, Chrome, IE8+; but for IE7, the inserted color div is not at the same line as checkbox. I wish somebody could give me any advice. thanks. codes attached:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;input type="checkbox" id="check1" /&gt;PINK
          &lt;script type="text/javascript"&gt;
          var colorHtml = '&lt;div style="border: 1px solid rgb(204, 204, 204); display: inline-block;   margin-left: 20px; width: 12px;"&gt;&lt;div style="width: 4px; height: 0pt; border: 4px solid rgb(200,100,200); overflow: hidden;"&gt;&lt;/div&gt;&lt;/div&gt;';
          $("#check1").before(colorHtml);
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>screen shot:</p>
  
  <p>IE7:
  <img src="https://i.stack.imgur.com/0igof.jpg" alt="IE7"></p>
  
  <p>IE8: <img src="https://i.stack.imgur.com/sZthc.jpg" alt="IE8"></p>
  
  <p><strong>UPDATED:</strong></p>
  
  <p>adding float:left:<img src="https://i.stack.imgur.com/TwnXv.png" alt="enter image description here"></p>
  
  <p>not using float, adding "zoom:1; *display:inline;": <img src="https://i.stack.imgur.com/CIhlU.png" alt="enter image description here"></p>