title: Vertical align checkbox / label pairs
body: <p>I go through the posts on this issue on Stack Overflow, but nothing really works for me. I have the following CSS code to vertically align checkbox / label pair:</p>
  
  <pre><code>body {
      font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
      font-size: 11px;
      margin: 0;
      padding: 0;
  }
  
  fieldset {
      line-height: 100%;
  }
  
  label {
      display: inline-block;
      vertical-align: baseline;
  }
  </code></pre>
  
  <p>The full HTML code is <a href="http://821.gvs.arnes.si/test/index.html" rel="noreferrer">here</a>.</p>
  
  <p>Checkbox / label pairs are vertically centered correctly in Safari (5.0.3) and Firefox (3.6.13) under Mac OS X. On Chrome (Mac OS X) checkboxes are rendered slightly to the top. On Windows OS checkboxes and associate labels are aligned to the bottom (consistently across different browsers: Firefox, Safari, Chrome, and Internet Explorer 8).</p>
  
  <p>Could somebody please explain me why this differences between browsers / OS happens (and also how to avoid them)?</p>
  
  <p><strong>Update</strong></p>
  
  <p>The hack to vertically align checkbox with label in Chrome under Mac is as follows:</p>
  
  <pre><code>input[type=checkbox] {
      position: relative;
      top: 1px;
  }
  </code></pre>
  
  <p>Now need to implement OS and browser specific conditionals...</p>