title: Firefox not respecting max-width/height in parent without set width/height
body: <p>I've got a strange problem, in Chrome/Safari, the image respects it's max width/height styling inside of a parent with no set width/height. but not in Firefox/Opera.</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;figure&gt;
          &lt;img src="http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001b.jpg"&gt;
      &lt;/figure&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That's the image and it's containers. The CSS is as follows:</p>
  
  <pre><code>body {
      width: 100%;
      height: 100%;
  }
  #container {
      width: 90%;
      height: 90%;
      margin: auto;
  }
  figure {
      position: relative;
      display: inline-block;
      margin: 0;
      vertical-align: top;
      line-height: 0;
  }
  img {
      height: auto;
      width: auto;
      max-width: 100%;
      max-height: 100%;
  }
  </code></pre>
  
  <p>The <code>figure</code> element is only there to serve as an overlay to the image by using the <code>:before</code> selector, but that doesn't work if it has a set width/height. Is there any way to get Firefox and Opera to respect the grandparents height/width instead?</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/GUrkj/1/" rel="nofollow">http://jsfiddle.net/GUrkj/1/</a></p>