title: document.write() and document.images[i].width fails in IE8!
body: <p>I'm using <code>document.write()</code> just to debug some code and found some very strange behaviour in IE8. Is it me, or is this a bug?!</p>
  
  <p>A page with just 4 <code>img</code> elements:</p>
  
  <pre><code>&lt;img src="img/one.jpg" width="100" height="75" alt="1st Demo Image" title=""&gt;
  &lt;img src="img/two.jpg" width="100" height="75" alt="2nd Demo Image" title=""&gt;
  &lt;img src="img/three.jpg" width="100" height="75" alt="3rd Demo Image" title=""&gt;
  &lt;img src="img/four.jpg" width="100" height="75" alt="4th Demo Image" title=""&gt;
  </code></pre>
  
  <p>Looping through the <code>document.images</code> HTMLCollection to output the value of the width attribute for each image using <code>document.write()</code> (or <code>document.writeln()</code> it doesn't matter):</p>
  
  <pre><code>for (var i=0; i&lt;document.images.length; i++) {
      document.writeln(i + ' - ' + document.images[i]['width']);
  }
  </code></pre>
  
  <p>All browsers, except IE8, output 4 lines as expected. IE8, however, just outputs the 1st line, for the first image! Why?!</p>
  
  <p>The loop is 'looping' OK. You can output the <code>width</code> attribute using an <code>alert()</code> and you get 4 alerts in IE8, but still only the first line is output using <code>document.write()</code>!</p>
  
  <pre><code>for (var i=0; i&lt;document.images.length; i++) {
      document.writeln(i + ' - ' + document.images[i]['width']);
      alert(i + ' - ' + document.images[i]['width']);    // Alerts 4 times
  }
  </code></pre>
  
  <p>The 'height' attribute is also a problem. Other attributes, however, like 'src', 'alt' and even undefined attributes like 'monkey' output OK; providing you <em>don't</em> have an <code>alert()</code> in the loop as well!</p>
  
  <p>If you take <code>document.write()</code> out of the loop, append to a string inside the loop and only have 1 <code>document.write()</code> after the loop to output the string then that is OK.</p>
  
  <p>It is also a problem accessing the width attribute via the NodeList... <code>document.getElementsByTagName('img')[i].width</code> - same problem as above, only the first line is output!</p>
  
  <p>Any ideas? Or is it just an 'IE8' quirk!?</p>
  
  <p><strong>EDIT#1</strong></p>
  
  <p>This code is <em>not</em> being run in an event, like <code>onload</code>. It is being run in a script element in the body of the page, whilst the page is being parsed. Yes, you cannot call <code>document.write()</code> in an event, hoping to influence the current document since document parsing will probably have completed and calling <code>document.write()</code> will implicitly open a new document.</p>
  
  <p>This problem <em>only</em> manifests itself on IE8.<br>
  IE6, IE7, IE9 and all other browsers tested work as expected.</p>
  
  <p><strong>EDIT#2 - Found the cause (but not the reason)</strong></p>
  
  <p>Ok, I thought my test page was very simple - it appears it wasn't quite simple enough! I think I've found the cause (not the reason) of this problem, but unfortunately this is where it gets even weirder!</p>
  
  <p>The problem appears to be if the script element producing the output is directly inside an element that is <code>display:block</code>. This does not have to be an element that is inherently a block-level element (like <code>div</code> or <code>pre</code>), but any element that is <code>display:block</code>! There must be no white-space between the block container and the script element.</p>
  
  <p>So, this exact code (between the body tags) reproduces this problem in IE8:</p>
  
  <pre><code>&lt;img src="img/one.jpg" width="100" height="75" alt="1st Demo Image"&gt;
  &lt;img src="img/two.jpg" width="100" height="75" alt="2nd Demo Image"&gt;
  &lt;img src="img/three.jpg" width="100" height="75" alt="3rd Demo Image"&gt;
  &lt;img src="img/four.jpg" width="100" height="75" alt="4th Demo Image"&gt;
  &lt;pre&gt;&lt;script type="text/javascript"&gt;
  // Only the first line is output in IE8, other browsers OK
  for (var i=0; i&lt;document.images.length; i++) {
      document.writeln(i + ' - ' + document.images[i]['width']);
  }
  &lt;/script&gt;&lt;/pre&gt;
  </code></pre>
  
  <p>But, if you were to put just a single space after the opening <code>&lt;pre&gt;</code> tag the problem goes away (but you get an extra space in the output)!</p>
  
  <p>And, this only seems to affect the <code>width</code> and <code>height</code> (numeric?) attributes!</p>