UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

Example URL:
http://codepen.io/denilsonsa/pen/KgajKP

Steps to reproduce the problem:
1. Open http://codepen.io/denilsonsa/pen/KgajKP

Alternatively, use this code:

<div>
<span id="lnum">222</span><span id="test"></span>
</div>

<style>
div {
  white-space: pre;
  font-family: "Liberation Mono", monospace;
  font-size: 14px;
}
#lnum {
  width: 40px;
  display: inline-block;
  padding: 3px 5px 3px 0;
}
#test {
  padding: 3px 0 3px 5px;
  border: 1px solid #CCCCCC;
  background: #EEEEEE;
}
#test em {
  font-style: normal;
  font-weight: bold;
  background-color: #FFFFCC
}
</style>

<script>
document.getElementById('test').innerHTML = '##\t\tTesting<em>foobar</em>another';
</script>

What is the expected behavior?
The text should render correctly.

What went wrong?
The text is messed up.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 53.0.2785.116  Channel: stable
OS Version: Ubuntu 16.04
Flash Version: Shockwave Flash 23.0 r0

 http://crbug.com/398274  is a related bug, but maybe not exactly duplicate.
 

Deleted: rendering-in-chrome.png 3.0 KB

	rendering-in-chrome.png 3.0 KB View Download

Deleted: rendering-in-firefox.png 3.1 KB

	rendering-in-firefox.png 3.1 KB View Download