Background image not showing up on IE8

问题:

I've read through other questions but to no avail - I really can't work this out.

The site is (Been redesigned, so isn't relevant anymore. It used HTML5 elements, but they weren't declared as block, and IE doesn't assume that they should be.)

The gradient on the footer looks great in non IE browsers, but fails to show in IE 7,8 and the IE9 dev preview.

Any ideas?

回答1:

You could try adding this to your footer CSS (in addition to your existing footer styles).

footer
{    
    display:block;
}

This fixed it for me under FF3.6, and I'm assuming will fix it in IE as well - The default display style for <footer> is inline which doesn't play nice with backgrounds regardless of browser. Applying block to it will treat it more like a div.

You'll also want to be careful with your use of HTML 5. Not sure of how well supported it is in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and applying styles to it by id in CSS instead..

回答2:

I had a similar problem, but finally find the solution.

Change your format image to png.

And works fine in IE8.

回答3:

This works:

#footer_text { 
  background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left; 
}

I'd be careful about applying any styling to html5 elements like footer right now. They're not well supported by all browsers.

You can use them for semantic reasons, though.

回答4:

If I look at the footer using IE 8's developer toolbar, I get this as the background-image definition:

 url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center

Notice the part to the right. I'm not sure where it comes from - it's not in the style sheet. Maybe the sheet is somehow garbled. If I remove the text-align part, the footer image shows fine. The same is happening to your body definition.

回答5:

try opening the file in Photoshop or similar, and doing a clean save for web as a PNG.