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

Question

我有一页有几个 div。

它都可以在 Firefox 和 Internet Explorer 中运行，但不能在 chrome 中运行。

是正在发生的事情的图片。

第一个打印来自 Google 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 中的空白（中心显示为内联块）和 font-size/letter-spacing 在 Chrome 中可能处理不同。

所以，从 html like 中删除那些空格：

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

或重置字体大小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

Answer 2

在您的 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>