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中工作？

回答

相關問題