title: HTML5 - contenteditable="false" nested in contenteditable="true"
body: <p>I'm having very different behaviors with nested contenteditable="false" elements within a parent contenteditable="true:</p>
  
  <pre><code>  &lt;pre&gt;
    &lt;div contenteditable="true"&gt;
      &lt;span&gt;I'm supposed to be editable&lt;/span&gt;
      &lt;p contenteditable="false"&gt;I'm NOT supposed to be editable.&lt;br&gt;Neither should I.&lt;/p&gt;
      &lt;span contenteditable="false"&gt;I'm NOT supposed to be editable.&lt;/span&gt;
    &lt;/div&gt;
    &lt;/pre&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/w5z44zhu/" rel="nofollow noreferrer">This fiddle</a> exemplifies how two elements that should not be editable are in fact editable with Internet Explorer 11 but not Google Chrome. What gives?</p>
  
  <p>I have seen some people applying a strange workaround by setting them to "true", which indeed works for IE, but has the opposite effect on Google Chrome (as it should).</p>
  
  <p>The answer for this similar <a href="https://stackoverflow.com/questions/7522848/contenteditable-false-inside-contenteditable-true-block-is-still-editable-in-ie8">question</a> is dated from 2013. Three years after, is this still the current scenario ?</p>
  
  <p>Edit:
  <a href="http://jsfiddle.net/fhgkvjj5/" rel="nofollow noreferrer">This fiddle</a> almost achieves the wanted result. However, if you set the cursor to "Don't move.." and move it to the left until you reach the non-editable span, you will gain focus and able to edit it. Any ideas to avoid this behavior ? </p>
  
  <p>Affected browser: Internet Explorer 11</p>