1

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

我正在处理一个简单的站点布局。我今天在 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

4

2 回答 2

1

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

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

如果您没有指定任何内容width，而只是保留了padding您现在所拥有的内容，该怎么办。那应该行得通。

于 2012-07-15T01:39:51.377 回答
0

如果您将父容器设置为

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>
于 2013-08-13T23:33:09.327 回答