为什么背景没有被完全覆盖

这是我的CSS背景，但问题是背景中的所有边缘仍然存在4px的间隙。怎么了？为什么背景没有被完全覆盖

#header-color { 
    background:transparent; 
    background: #cccccc; /* old browsers */ 
background: -moz-linear-gradient(top, #cccccc 24%, #eeeeee 100%); /* firefox */ 

background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,#cccccc), color-stop(100%,#eeeeee)); /* webkit */ 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0); /* ie */ 
    background-repeat:repeat; 
    background-position:top; 
}

来源

2011-08-26 john

题外话：我建议对IE使用[CSS3Pie]（http://css3pie.com/），因为它可以让你使用标准的CSS渐变而不是那些可怕的'filter'风格。 – Spudley

您在其他地方是否在该元素上设置了边距或边框？（即内联或通过班级）。我不认为背景适用于边距，显然边界是自己设计的。但是，填充确实接受元素的背景样式 – wolv2012

什么样的元素是header-color？您可能需要添加：

padding: 0; 
margin: 0;

如果你的头是在页面的顶部，您可能需要卸下身体的margin和padding，像这样：

html, body { 
    margin: 0; 
    padding: 0; 
}

来源

2011-08-26 20:44:25

所以我应该只是将其添加到CSS？ – john

它完美无缺的工作...最佳答案...谢谢你们。 – john

由于你是新手，你可能没有意识到这一点：如果我的答案回答了你的问题，你应该点击旁边的复选标记来表明它是*答案。 :-) –

浏览器曾经有自己的样式定义。如果您在CSS中包含某种重置，则会覆盖您的背景。一些选项：

例重置CSS：

/* ---------------------------- 
simple reset 
---------------------------- */ 

html, body, ul, ol, li, form, fieldset, legend 
{ 
    margin: 0; padding: 0; 
} 
h1, h2, h3, h4, h5, h6, p { margin-top: 0; } 
fieldset,img { border: 0; } 

legend { color: #000; } 
li { list-style: none; } 
sup { vertical-align: text-top; } 
sub { vertical-align: text-bottom; } 
table 
{ 
    border-collapse: collapse; border-spacing: 0; 
} 
caption, th, td 
{ 
    text-align: left; vertical-align: top; font-weight: normal; 
} 
input, textarea, select 
{ 
    font-size: 110%; line-height: 1.1; 
} 
abbr, acronym 
{ 
    border-bottom: .1em dotted; cursor: help; 
}

来源

2011-08-26 20:43:36 miku

谢谢。欣赏它。 – john

您需要删除用户代理样式表的默认margin上body：

html, body { 
    margin: 0; 
    padding: 0 
}

来源

2011-08-26 20:44:25 thirtydot

你的代码给我们的信息不足以准确地诊断问题。您提供的CSS代码没有任何固有的东西会导致4px的差距，并且您没有告诉我们关于元素上下文的任何信息，所以我们也看不到它周围还有什么可能导致差距。

但是，我的猜测是，4px的差距很可能是页面边缘周围的默认填充/边距。

这是对旧时代的回应，但它仍然存在，所以如果你想让你的页面内容直接流到窗口边缘，你需要清除这些边缘，如下所示：

html, body { 
    padding: 0; 
    margin: 0; 
}

有一些在默认样式其他的小怪癖的，可以抓住你了（尤其是一些具有跨浏览器的差异），所以它是有一个“重置”样式表是一个好主意。有一些可用的，但你可能想尝试这一个：http://meyerweb.com/eric/tools/css/reset/

将此样式表添加到您的网站将确保所有这些小布局怪癖处理。

希望有所帮助。

来源

2011-08-26 20:53:03 Spudley

它确实有帮助。 – john

为什么背景没有被完全覆盖

回答

相关问题