title: Font size larger than set in CSS
body: <p>When I set the font size to a specific pixel height, the computed font size is 1.333 times the size I've set in my CSS.  However, if I set the font size as a percentage, the correct size is used.  This happens in <em>every</em> browser that I've tried, including Firefox 3.6.28, Firefox 53.0.3 (both 32- and 64-bit), Internet Exploiter, Safari, Chrome and Opera.</p>
  
  <p>Here is a whittled-down example of the problem:</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;TocMenu Test&lt;/title&gt;
      &lt;link href="/style/styles.css" rel="stylesheet" type="text/css" /&gt;
      &lt;style type="text/css"&gt;
          body
          {   background:#000000 url('/graphics/l5-back-eso1213a-2K.jpg') repeat fixed;
              color:#ffffe8;
              font-family:Verdana, Arial, Helvetica, sans-serif;
              font-size:14px;
              font-weight:normal;
          }
          img
          {   border:0;
              margin:0;
              padding:0;
          }
          #menuRoot *
          {   min-width:0;/* peek-a-boo bug fix for IE7 */
              position:relative;/* peek-a-boo bug fix for IE6 */
          }
          #menuRoot img
          {   padding:3px;
          }
          .tocRoot
          {   padding:0;
          }
          .tocLevel1
          {   font-size:16.8pt;    /* 120% */
              font-weight:bold;
              margin-top:9px;
          }
          .tocLevel2
          {   font-size:15.4pt;    /* 110% */
              font-weight:bold;
              margin-top:6px;
          }
          .tocMenuOpen
          {   background:none;
              color:#ffff66;
              list-style:none;
          }
          .tocMenu1
          {   padding-left:30px;
          }
          .tocLink, a.tocLink
          {   color:#99ff99;
              text-decoration:none;
          }
          .tocBtn, .tocBtnNot
          {   display:inline-block;
              text-align:left;
              vertical-align:text-top;
              width:14px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;ul id="menuRoot" class="tocMenuOpen tocRoot"&gt;
      &lt;li&gt;
          &lt;p class="glueDown"&gt;
              &lt;span class="tocBtn" id="menuHome_bn"&gt;&lt;img src="/graphics/imgOpen.gif" alt="menu state indicator" /&gt;&lt;/span&gt;
              &lt;a href="//L5Development.com" class="tocLevel1 tocLink" title="The L5 Development Group - A For-Profit Private Enterprise Space Exploration and Development Program"&gt;Home&lt;/a&gt;
          &lt;/p&gt;
          &lt;ul id="menuHome" class="tocMenuOpen tocMenu1"&gt;
              &lt;li&gt;
                  &lt;p class="glueDown"&gt;
                      &lt;span class="tocBtnNot"&gt;&amp;nbsp;&lt;/span&gt;
                      &lt;a href="/TodaysNews.php" class="tocLevel2 tocLink" title="News about The L5 Development Group, space travel, space business, and related issues"&gt;Today's&amp;nbsp;News&lt;/a&gt;
                  &lt;/p&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>If I change the <code>tocLevel1</code> and <code>tocLevel2</code> <em><code>font-size</code></em> values from their pixel heights to the percentage values shown ih the CSS comments, the page works correctly.</p>
  
  <p>Why does <em>every</em> browser decide to use a font size one third larger than what is set in the CSS when the <code>font-size</code> value is set to a specific height?</p>