CSS背景网址不能在Firefox中工作，但在IE中工作？
我有我的网站布局的阴影背景，在IE中显示得很好，但是如果我使用“height：100px;”，或者如果我实际输入了一些文本，firefox只显示阴影（图像） m使用阴影img和div来布局。我如何在Firefox中完成这项工作？CSS背景网址不能在Firefox中工作，但在IE中工作？
CSS：
.bg_shadow {
margin-left:auto;
margin-right:auto;
background:url("../images/bg_shadow.gif") repeat-y scroll left top transparent;
width:1024px;
height:100%;
}
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
text-align:center; /*used in centering the liquid layout in the browser window */
/*background:#CCCCCC;*/ /*page background color */
}
#wrapper {
margin:0 auto;
width:1000px; /* you can use px, em or % */
text-align:left;
}
a {
color:#01128E;
}
a.link:hover {
color:#FFFFFF;
background-color:#01128E;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
line-height:1.35em;
}
img.padme {
margin:10px 25px;
}
#ads img {
display:block;
padding-top:10px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
position:relative;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header p.login{
position:absolute;
top:0;
right:0;
text-align:right;
margin:0;
padding-top:10px;
}
/* 'widths' sub menu */
#horizontal_border {
clear:both;
background:#eee;
border-top:4px solid #01128E;
margin:0;
padding:0px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 2 Column (right menu) settings */
.rightmenu .colleft {
right:25%; /* right column width */
background:#FAFAFA; /* left column background colour */
}
.rightmenu .col1 {
width:71%; /* left column content width (left column width minus left and right padding) */
left:27%; /* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
width:21%; /* right column content width (right column width minus left and right padding) */
left:31%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
.slogan{
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
color:#999999;
position:relative;
top:-20px;
left:30px;
}
.header_gradient{
background:url("../images/header_gradient.gif") repeat-x scroll left top transparent;
}
.background_color{
background-color:#EEEEEE;
}
#nav_div{
width:100%;
height:35px;
background:url("../images/spacer.gif") repeat left top;
}
HTML：
<div class="bg_shadow">
<div id="wrapper">
<p>Main Content</p>
</div>
</div>
尝试在你的CSS使用min-height: 100px;或在你的HTML添加&nsbp;你的空元素。
好吧，幸运的是....在bg_shadow类中放入了“overflow：hidden”，阴影显示了我想要的。不知道为什么，但这工作。
感谢您的回复。
height:100%;
100%是什么？如果您没有在父<body>上指定高度，则100%没有意义。
浏览器无法知道身体的高度，因为它取决于子元素的高度......这是您尝试以相对于身体高度的百分比指定的高度。 CSS通过saying打破这种循环依赖关系，如果包含的块没有指定的高度，百分比高度将被忽略，并使用auto。
如果这在IE中适合你，你可能在Quirks Mode。这是有效的，因为在怪癖模式中，<body>元素是（不正确）用于表示视口，因此具有固有的指定窗口高度。但是你不想进入怪癖模式，它充满了令人难以置信的糟糕的错误。使用标准模式DOCTYPE和IE的行为更像其他浏览器。
然后使用.bg_shadow { min-height: 100px; }或任何最小高度来显示阴影，如果你真的没有任何静态内容。对于IE6，您可以添加一条规则，例如* html .bg_shadow { height: 100px; }，以解决缺少支持min-height的问题，而不会打破其他字面上会需要height: 100px;的浏览器。
什么风格被应用于'wrapper'？更多的标记可能会有所帮助。 – wsanville 2010-09-24 21:41:50
我已经用完整的CSS更新了帖子。 – Ronedog 2010-09-24 21:45:38
使用Firebug进行检查，进入“网络”选项，然后选择“图像”，查看服务器的响应情况。 – 2010-09-24 21:48:52