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>

来源

2010-09-24 Ronedog

什么风格被应用于'wrapper'？更多的标记可能会有所帮助。 – wsanville 2010-09-24 21:41:50

我已经用完整的CSS更新了帖子。 – Ronedog 2010-09-24 21:45:38

使用Firebug进行检查，进入“网络”选项，然后选择“图像”，查看服务器的响应情况。 – 2010-09-24 21:48:52

尝试在你的CSS使用min-height: 100px;或在你的HTML添加&nsbp;你的空元素。

来源

2010-09-24 21:51:16

好吧，幸运的是....在bg_shadow类中放入了“overflow：hidden”，阴影显示了我想要的。不知道为什么，但这工作。

感谢您的回复。

来源

2010-09-24 21:52:07 Ronedog

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;的浏览器。

来源

2010-09-24 22:34:31 bobince

CSS背景网址不能在Firefox中工作，但在IE中工作？

回答

相关问题