CSS 背景 url 在 firefox 中不起作用，但在 IE 中有效？

Question

我的站点布局有一个阴影背景，在 IE 中显示良好，但如果我使用“height:100px;”，或者如果我实际输入一些文本，firefox 只会显示阴影(图像)。我我正在使用带有 div 的阴影 img 进行布局。我怎样才能使它在 Firefox 中工作？

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>

Answer 1

好吧，很幸运....在 bg_shadow 类中输入“溢出:隐藏”，阴影就完全按照我想要的方式显示了。不知道为什么，但这有效。

感谢您的回复。