title: Text vertical shift due to fractional heights in IE 9 and 10
body: <p>Consider the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p style="font-family: Arial; font-size: 15px"&gt;First line&lt;/p&gt;
  &lt;p style="height: 24px; line-height: 24px; background: green; color: white; font-family: Arial; font-size: 14px"&gt;Test&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>IE 9/10 display it as expected:</p>
  
  <p><img src="https://i.stack.imgur.com/g1VM1.png" alt=""></p>
  
  <p>However, let us add another line to the first paragraph.</p>
  
  <pre><code>&lt;p style="font-family: Arial; font-size: 15px"&gt;First line&lt;br /&gt;Second line&lt;/p&gt;
  </code></pre>
  
  <p>After this the "Test" paragraph gets shifted relative to its background:</p>
  
  <p><img src="https://i.stack.imgur.com/1TbpT.png" alt=""></p>
  
  <p>Under a closer look it's quite noticeable.</p>
  
  <p><img src="https://i.stack.imgur.com/F96HY.png" alt=""></p>
  
  <p>I believe the reason for this is that height of the first paragraph is fractional (as shown by IE dev tools):</p>
  
  <p><img src="https://i.stack.imgur.com/mbbqz.png" alt=""></p>
  
  <p>Now, I have a web page with a lot of such text blocks, some of them shifted and some of them not. Naturally, I want all blocks to appear normal and not shifted. Is it possible to force IE 9/10 to render it that way?</p>
  
  <p><img src="https://i.stack.imgur.com/LpzV5.png" alt=""></p>
  
  <p>By the way, versions 7 and 8 of IE display the page just fine.</p>