css div结构适用于Firefox，但不适用于chrome

Question

我有一个页面有几个div。

它全部在Firefox和Internet Explorer中工作，但不在chrome中。

是什么情况发生的。

第一个打印来自谷歌Chrome，下一个（正确的）来自mozzila，但它等于IE。

红色是父Div，得到了这个CSS：

#full-size{
    height:80%;
    width:100%;
    overflow:auto;
    /*border: 1px solid #000;*/
    top:5px;
    position:relative; 
    padding: 1px 220px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#F00;
}

然后我们有另外三个，左边和右边的尺寸都很大，中间的一个总是适应空间可用。

这三者的CSS：

#left-content {
    width:190px;
    border:1px solid #000;
    overflow:auto;
    position:relative; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;  
    margin-left: -200px;
    float:left;
}
#center-content {
    height:99%;
    width: 100%;
    border:1px solid #000;
    overflow:auto;  
    display:inline-block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;
}
#right-content {
    width:190px;
    border:1px solid #000;
    overflow:auto;
    float:right;
    position:static; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;
    margin-right: -200px;
}

如果我将宽度从中间的一个改为更小，比如99.7％，则div保持在原位，但中间的两个并不与两侧的边界保持相同的距离，而不是集中。

如果我改变，例如，从99.7％改为99.8％，则div保持在底部。但我需要的是100％的响应式主题，100％适用于Firefox和IE。

任何帮助都将不胜感激。

Answer 1

在您的HTML放置中心容器之后的其他容器。 像这样：

<div id="left-content">
<p>left</p>
</div>

<div id="right-content">
<p>right</p>
</div>

<div id="center-content">
<p>center</p>
</div>

Answer 2

您的问题来自HTML中的空白区域（中心显示为内联块），而font-size / letter-spacing可能会在Chrome中有所不同。

所以，从html like中删除那些hite-space：

<div id="full-size"><div id="left-content">
    left
  </div><div id="center-content">
    Center
  </div><div id="right-content">
    right
  </div></div>

或重置font-size like：

#full-size{
  font-size:0;
}
#full-size > * {
  font-size:16px;
}

最好是在HTML中删除空白区域，而不是使用CSS技巧或重置。

如果您使用display:table / table-cell和border-spacing，则不必再担心了，您可以放弃浮动和/或inline-block方法。 http://codepen.io/anon/pen/GwuIj