title: inline-block in IE9 compatibility quirks mode
body: <p>I am currently developing a html/css menu. My issue is that the page that the menu will be inserted in, when loaded, causes the browser to go into quirks and compatibility mode. I cannot control this.</p>
  <p>Here is my css:</p>
  <pre><code>.community-menu {    
      margin: 5px;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      padding: 15px 30px;
      cursor: pointer;
  }
  
  #container {
      width: 100%; 
      position: relative;
      text-align: center;
  }
  </code></pre>
  <p>My issue is that inline-block in IE quirks and compatibility mode causes the menus to take up full width of its parent div.</p>
  <p>Here is what the divs look like in Chrome and Firefox:</p>
  <p><img src="https://i.stack.imgur.com/4mF14.jpg" alt="Chrome and Firefox rendering of inline-block" /></p>
  <p>In IE the same divs expand to full width of parent div</p>
  <p><img src="https://i.stack.imgur.com/FpugG.jpg" alt="IE rendering of inline-block" /></p>
  <p>What I am trying to achieve is centred divs that resize with text contents that as the browser resizes are automatically pushed down.</p>
  <p>I found some code from another SO question that shows my issue <a href="http://jsfiddle.net/3sK4S/" rel="nofollow noreferrer">here</a> when viewed with IE in compatibility and quirks mode.</p>
  <p>Following a comment by Spudley here is a pic to show the default mode it loads in.</p>
  <p><img src="https://i.stack.imgur.com/leTTn.jpg" alt="enter image description here" /></p>
  <p>Even though it says IE8, the end result is the same in IE9. On different pc today :)</p>