title: Internet Explorer incorrectly calculates percentage height for generated content in td
body: <p>IE11 is calculating the height of a table cell as the height of its content (20px) and not as the height of its background (100px).<br>
  Other browsers work as expected.</p>
  
  <p>How can I fix that in IE?<br>
  Or: what am I doing wrong?<br>
  Or: how can I work around that?</p>
  
  <hr>
  
  <p>I need this so I can draw a vertical line behind a table cell.</p>
  
  <h1>1. Restrictions</h1>
  
  <p>Some work-arounds are not possible, due to the details of my particular problem.</p>
  
  <h2>1.A. Height is not constant</h2>
  
  <p>The height is not constant, it depends on the amount of text on another cell.</p>
  
  <p>So I cannot use a fixed line-height either. If I could, I could also just put that fixed size as ::before's height.</p>
  
  <h2>1.B. Cannot use a background-image</h2>
  
  <p>I cannot work around that  by using a repeating background-image because the line is supposed to <strong>not</strong> be drawn behind an icon that is centred, so I am drawing it by using generated content (<code>::before</code> and <code>::after</code>) with <code>height: calc(50% - 20px);</code>.</p>
  
  <h1>2. Online sample</h1>
  
  <p>Try opening the <a href="http://jsfiddle.net/mzp01tvu/" rel="noreferrer">online sample</a> in IE11, and in Firefox or Chrome.</p>
  
  <p>Note that JavaScript shows the first cell to <strong>be</strong> 100px tall, and the background fills the 100px. But the generated content is only ~20px tall...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              #borked {
                  background: yellow;
                  position: relative;
                  height: 100%;
              }
              #borked~* {
                  height: 100px;
              }
              #borked::before {
                  content: "";
                  position: absolute;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  background-color: rgba(255, 0, 0, 0.3);
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;table&gt;
              &lt;tr&gt;&lt;td id="borked"&gt;abc&lt;/td&gt;&lt;td&gt;def&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
      &lt;script type="text/javascript"&gt;
          "use strict";
          var borked = document.getElementById("borked");
          var c = document.createElement("td");
          c.textContent = "(1st cell seems to be " + borked.clientHeight + "px tall)";
          borked.parentElement.appendChild(c);
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>