title: Element with CSS display: none; breaking layout - causing misalignment
body: <p>I have a basic menu, made from a horizontally aligned list (<code>&lt;li&gt;</code>), each containing an icon image and some text:</p>
  
  <p><img src="https://i.stack.imgur.com/JGwWT.png" alt="Menu bar"></p>
  
  <p>One of the <code>&lt;li&gt;</code> contains an extra image with <code>display: none;</code> so that the icon can be toggled (from a green to a red pepper, in this example.
  The problem is that it doesn't align correctly on some browsers, as shown in the above image. My understanding was that in contrast to <code>visibilty: hidden;</code>, an element with <code>display: none;</code> should not affect the position of any other element and should render as if it's not there?</p>
  
  <p>The browsers where it doesn't render correctly are Google <strong>Chrome</strong> and <strong>Safari</strong> - but only on <strong>MacOS</strong>(!?) and <strong>IE7</strong> (I know, I know...) on Windows. Every other browser / OS combination I've tested works fine.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
      &lt;li&gt;&lt;img alt="Green Pepper" src="/green.png"&gt;li&lt;/li&gt;
      &lt;li&gt;&lt;img alt="Green Pepper" src="/green.png"&gt;li&lt;/li&gt;
      &lt;li&gt;&lt;img alt="Green Pepper" src="/green.png"&gt;li&lt;/li&gt;
      &lt;li id="change"&gt;
          &lt;img alt="Red Pepper" src="/red.png" style="display: none;"&gt;
          &lt;img alt="Green Pepper" src="/green.png"&gt; 
          li
      &lt;/li&gt;
      &lt;li&gt;&lt;img alt="Green Pepper" src="/green.png"&gt;li&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>.menu li {
      cursor: default;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10pt;
      list-style-type: none; 
      position: relative; 
      text-align:center; 
      margin: 0 0 0 -25px; 
      padding: 8px 0 0 0;
      width: 144px;
      height: 35px;
      display: inline-block;
      background-image: url(../bct-white.png);
      background-repeat: no-repeat;
      color: #0091c1;
  }
  </code></pre>
  
  <p>And for the icon images:</p>
  
  <pre><code>.menu img {
      display: inline;
      vertical-align: -25%;
      padding-right: 6px;
  }
  </code></pre>
  
  <p>I've also had to include a browser hack for IE7 because it doesn't recognise inline-block, coming from a separate stylesheet based on a conditional import (<code>&lt;!--[if lte IE 7]&gt;</code>):</p>
  
  <pre><code>.menu li {
      zoom: 1;
      display: inline;
  }
  </code></pre>
  
  <p>Although, obviously that style isn't loaded on Chrome and Safari regardless of OS, so can't be causing my issue on Macs.</p>
  
  <p>I know the quickest solution would be to refactor the HTML and the JavaScript manipulation of the show / hide of the icons, but I'd really like to know what causes this issue and how to resolve it.</p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>I've tracked the cause down. Basically, the element style of <code>display: none;</code> on the <code>&lt;img&gt;</code> element overrides the <code>inline</code> from the <code>.menu img</code> rule. Removing that, then toggling between <code>block</code> and <code>inline</code> allows you to reproduce the issue. This is obviously a browser bug, and while the element is not displayed being an in-line or block element should have no effect on the layout.</p>
  
  <hr>
  
  <p><strong>jsFiddles</strong></p>
  
  <p><a href="http://jsfiddle.net/z4dU7/4/">Issue with Chrome and Safari on Macs only</a></p>
  
  <p><a href="http://jsfiddle.net/z4dU7/3/">Issue with extra CSS for IE7 only</a></p>
  
  <p>Note! For me, the Fiddle page didn't load properly using IE7, but the direct link for the result iFrame is <a href="http://fiddle.jshell.net/z4dU7/3/show/">http://fiddle.jshell.net/z4dU7/3/show/</a></p>
  
  <p><strong>Bounty update!!!</strong></p>
  
  <p>I've posted one fix below, but it actually introduces the same layout problem in IE9! Please feel free to evolve or improve on my answer - or come to the table with something completely different! :)</p>