title: Correcting Webkit Vertical Alignment Issue with <sup> and CSS vertical-align:top on TD
body: <p>Made a major revision to demonstrate issue and clarify cause in CSS:</p>
  
  <p>Chrome and Safari display this code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                      "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  BODY { background:#fff; }
  .survey_table TD {
      vertical-align:top;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table class="survey_table"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;
  2. Are you familiar with the &lt;a href="http://example.com"&gt;Louisiana Sanitary Code&lt;/a&gt;&lt;sup&gt;1&lt;/sup&gt; requirements for laboratories to report notifiable (reportable) conditions to the Louisiana Office of Public Health?
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Like this:</p>
  
  <p><img src="https://i.stack.imgur.com/wgxKE.jpg" alt="screenshot of chrome"></p>
  
  <p>Firefox and IE display it like this:</p>
  
  <p><img src="https://i.stack.imgur.com/PVQZR.jpg" alt="screenshot of firefox"></p>
  
  <p>The issue is coming from the CSS on the TD <code>vertical-align:top;</code>  Does anyone know how to get Webkit browsers to display  like FF and IE and preserve the CSS vertical-alignment?</p>