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

我做了一个搜索，找不到这个已经问过的问题，但我确定它肯定已经出现过，而且我找不到它。非常抱歉，如果这是事先提出的重复问题。Chrome Div区域没有扩展到全宽？

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

继承人的图片，浏览器右侧，顶部DIV和底部的页脚DIV差距：

Chrome Gaps

这是这两个区域的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

来源

2012-07-15 Eric Banderhide

'topImgBg.png' 1像素宽？ – 2012-07-15 00:34:12

其7个像素宽。 – 2012-07-15 00:39:38

我不知道在这种情况下应该发生什么，但如果这样做会溢出窗口，浏览器可能不会再次水平重复。如果您使用1像素图像会发生什么？ – 2012-07-15 00:43:16

您有width设置为76%。并且左侧和右侧的padding也以百分比表示。我认为这是浏览器中四舍五入的差异。

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

如果您没有指定任何width并刚刚离开padding，现在就有了该怎么办。这应该工作。

来源

2012-07-15 01:39:51

没错，只是指定填充而不是宽度。谢谢您的帮助。我学到了一些新东西，希望这对其他寻找这个答案的人有用。 – 2012-07-15 02:15:09

如果父容器

display: table;

和子模块设置为

display: table-cell;

镶边将正确计算百分比（只要他们加起来为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-13 23:33:09

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

回答

相关问题