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

Question

我有一个包含多个 div 的页面。

这一切都适用于 Firefox 和 Internet Explorer，但不适用于 chrome。

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

第一个打印来自 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 的空白(中心显示为行内 block )和 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>

或重置字体大小like :

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

最好是去掉 HTML 中的空白，不要使用 css 技巧或重置。

如果你使用display:table/table-cell 和border-spacing，你就不用太担心了，你可以放弃 float 和或 inline-block 方法。 http://codepen.io/anon/pen/GwuIj