Question

我有一个阴影背景，我的网站布局在IE中显示很好，但firefox只显示阴影（图像），如果我使用“height：100px;”，或者如果我实际输入一些文本。我使用阴影img和div作为布局。我怎么能在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类中放入“溢出：隐藏”，阴影出现了我想要它的确切方式。不知道为什么，但这有效。

感谢您的回复。

Answer 2

height:100%;

100%什么？如果您未在父<body>上指定高度，则100%毫无意义。

浏览器无法知道正文的高度，因为它取决于子元素的高度...这是您尝试以相对于正文高度的百分比指定的高度。 CSS通过saying打破了这个循环依赖关系，忽略了百分比高度，如果包含的块没有指定的高度，则使用auto。

如果这在IE中适合您，您可能在Quirks Mode。这是因为在Quirks模式下，<body>元素（错误地）用于表示视口，因此具有固有的指定高度，无论窗口多大。但你不想处于Quirks模式，它充满了令人难以置信的糟糕错误。使用标准模式DOCTYPE和IE的行为将更像其他浏览器。

然后使用.bg_shadow { min-height: 100px; }或任何最小高度来显示阴影，如果它内部没有任何静态内容。对于IE6，您可以添加* html .bg_shadow { height: 100px; }之类的规则，以解决对min-height缺乏支持的问题，而不会破坏其他需要height: 100px;字面的浏览器。

Answer 3

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

CSS背景网址在Firefox中不起作用，但在IE中有效吗？

3 个答案: