html - Chrome Div 区域没有扩展到全宽？

Question

我四处搜索，找不到这个已经问过的问题，但我确定它之前一定出现过，但我找不到它。很抱歉，如果这是一个重复的问题。

我正在处理一个简单的网站布局。我今天在 chrome 中注意到 2 个 div 区域没有完全扩展到宽度。在 Firefox 和 IE 中，它们会完全扩展。 2 个有问题的 div 区域确实包含表格。这可能是原因吗？

这是一张图片，右侧是 Chrome，顶部 div 和底部页脚 div 之间存在空白:

这是两个区域的 CSS:

.topbar{
    margin: 0;  <---Added this in a hope to fix it.
    width:76%;
    height: 34px;
    background-image:url('img/topImgBg.png');
    background-repeat:repeat-x;
    padding-left: 12%;
    padding-right: 12%; 
    color:white;
    font-size:12px;
    text-align:right;
}

.footer{
    height:15%;
    width:76%;
    padding-left:12%;
    padding-right:12%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A1A1A1', endColorstr='#ffffff'); 
    background: -webkit-gradient(linear, left top, left bottom, from(#A1A1A1), to(#ffffff)); 
    background: -moz-linear-gradient(top,  #A1A1A1,  #ffffff);
}

和正文 CSS:

html, body {    
    margin: 0; 
    padding: 0;
    width: 100%; 
    min-width:1024px;
    font-family:Verdana;
    font-size:14px;
}

TIA

Answer 1

您已将宽度 设置为76%。左边和右边的 padding 也以百分比表示。我认为这是浏览器中的百分比舍入差异。

如果以非常小的增量更改浏览器宽度，您可能会发现间隙会发生变化。

如果您没有指定任何 width 并且只保留 padding 会怎样？那应该有效。