title: Why this small page look different in Chrome and Firefox, is this a bug?
body: <p>Below is a small html page that looks different in Chrome vs Firefox browsers.
  Could anybody please explain why it looks different in Chrome if create an html document locally and open this document via Chrome (<em>jsfiddle shows it normally in Chrome, that's why I didn't create jsfiddle page as well</em>)? <img src="https://i.stack.imgur.com/LOHJ1.png" alt="enter image description here"></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;CCCC&lt;/title&gt;
  &lt;style&gt;
  body * {
  text-rendering:optimizeLegibility;
  }
  
  body,html {
  font-family:Arial,Helvetica,sans-serif;
  }
  
  #lesu-tab ul li {
  list-style:none;
  font-size:14px;
  font-weight:700;
  float:left;
  }
  
  #lesu-tab ul li a {
  border:1px solid #888;
  display:block;
  }
  
  .buggy{
  font-size:12px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="lesu-tab"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="http://www.example.com/"&gt;Link1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.example.com/"&gt;Link2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="buggy" href="https://www.example.com/"&gt;A ABC DEFGHIJ&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What makes me even more surprised is that if you change the font size from 12px to 11px or 13px for <code>class="buggy"</code>, Chrome displays it not in two lines, but in one - normally.</p>
  
  <p>Also, if you remove one or another one of any css properties on the page, it is displayed in one line as well. That's unclear for me why is this happening?
  Is this a bug?</p>
  
  <p>Any ideas how to fix it without removing css properties?</p>
  
  <p>And of course the code above is just less than 1% of a huge html page that causes this issue.</p>
  
  <p>Thank you.</p>