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

您已将width设置为76%。左右padding也是百分比。我认为这是浏览器中的百分比差异。

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

如果您没有指定任何width并刚刚离开padding，那该怎么办呢？这应该工作。

Answer 2

如果将父容器设置为

display: table;

并且孩子阻止

display: table-cell;

chrome会正确计算百分比（只要它们加起来为100％）。例如：

<ul>
    <li class="forty">asdf
    <li class="forty">asdf
    <li class="twenty">asdf
</ul>

<style>
    ul { display: table; width: 100%; list-style: none; margin: 0; padding: 0; }
    li.forty { display: table-cell; width: 40%; }
    li.twenty { display: table-cell; width: 20%; }
</style>