display: inline-block not working correctly in Chrome?

Question

The jsfiddle for the code can be found here: http://jsfiddle.net/c4rz0hk1/

The nav-wrapper at the bottom should be centered below the dividing line div at the bottom of the page. The works correctly in Firefox, but in Chrome it placed to the r-hand side of that same line. This is strange as the wrapper is set to 1024px anyways...

Here's a snippet of the css code:

footer {
  text-align: center;
  width: 1024px;
 }

  #nav-wrapper {
    display: -moz-inline-stack; 
    display: inline-block;
    text-align: center; 
    width: 900px;
    *display: inline; 
  }

Answer 1

Because footer has floated children, a overflow:hidden should be applied to it so it properly contains them, also your bottom nav needs to have floats cleared as it's siblings are floating causing it to 'go with the flow' (lame joke, sorry I couldn't stop myself :P).

To center the nav simply apply a margin: 0 auto; to it after clearing the floats.

Here's the updated css that I believe works according to your requirements -

footer {
  overflow: hidden;
  text-align: center;
  width: 1024px;
}

  #nav-wrapper {
    clear: both;
    display: block;
    margin: 0 auto;
    padding: 10px 0; /* Some padding to give the footer some vertical breathing space */
    text-align: center;
    width: 900px;
  }

Updated fiddle: http://jsfiddle.net/c4rz0hk1/1/

Answer 2

Try this:

@-moz-document url-prefix() {
    #nav-wrapper {
        display: -moz-inline-stack; 
        text-align: center; 
        width: 900px;
    }
}

#nav-wrapper {
    display: inline-block;
    text-align: center; 
    width: 900px;
}