显示：内联屏蔽无法在Chrome中正常工作？

Question

可以在以下位置找到该代码的jsfiddle： http : //jsfiddle.net/c4rz0hk1/

底部的导航包装器应位于页面底部分隔线div的下方。 在Firefox中可以正常工作，但在Chrome中，它可以放置在同一行的右手侧。 这很奇怪，因为包装器始终设置为1024px。

这是css代码的片段：

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

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

Answer 1

由于页脚中有浮动的子项，因此应对其应用overflow：hidden，以便其正确包含它们，并且您的底部导航需要清除浮动项，因为其兄弟姐妹正在浮动，导致其“顺其自然”（go笑话，对不起，我无法阻止自己：P）。

要使导航居中，只需应用margin: 0 auto; 清除浮标之后

这是我认为可以根据您的要求工作的更新的CSS-

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;
  }

更新的小提琴： http : //jsfiddle.net/c4rz0hk1/1/

Answer 2

尝试这个：

@-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;
}