CSS background image not loading in IE9

问题

I have an image that I'm trying to load in IE9. I can get the image to load in quirks mode, but can't get it to load in standard mode. It renders fine in both Firefox and Chrome.

Here is the CSS:

@charset "UTF-8";
/* 
    Background-Styles 
*/

body {
    margin:0px; padding:0px;
    background-color:#bfbfbf;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color:#7f7d78;
    font-size:13px;
    line-height:19px;
}
#main {
    background:#bfbfbf;
    /*padding-bottom:30px;*/
    min-height: 715px;
}
#main .container {
    /*background:#6d6f71;*/ 
    background: #343a3f; /* Old browsers */
    background: #6d6f71; /* Old browsers */
    background: url(images/ES_header_background_gradient2.png), -moz-linear-   gradient(-45deg, #6d6f71 0%, #3c3d3e 42%, #3c3d3e 45%, #6d6f71 100%); /* FF3.6+ */
    background: url(images/ES_header_background_gradient2.png), -webkit-gradient(linear, left top, right bottom, color-stop(0%,#6d6f71), color-stop(42%,#3c3d3e), color-stop(45%,#3c3d3e), color-stop(100%,#6d6f71)); /* Chrome,Safari4+ */
    background: url(images/ES_header_background_gradient2.png), -webkit-linear-gradient(-45deg, #6d6f71 0%,#3c3d3e 42%,#3c3d3e 45%,#6d6f71 100%); /* Chrome10+,Safari5.1+ */
    background: url(images/ES_header_background_gradient2.png), -o-linear-gradient(-45deg, #6d6f71 0%,#3c3d3e 42%,#3c3d3e 45%,#6d6f71 100%); /* Opera 11.10+ */
    background: url(images/ES_header_background_gradient2.png), -ms-linear-gradient(-45deg, #6d6f71 0%,#3c3d3e 42%,#3c3d3e 45%,#6d6f71 100%); /* IE10+ */
    background: url(images/ES_header_background_gradient2.png), linear-gradient(-45deg, #6d6f71 0%,#3c3d3e 42%,#3c3d3e 45%,#6d6f71 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6f71', endColorstr='#6d6f71',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.container {
    height: 60px;
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    display:block;
}
/* 
    Header-Styles 
*/

#header {
    padding-top:20px;
    padding-bottom:20px;
    width:1024px;
    margin:0 auto;
    position:relative;
    margin-bottom:1px;
    height:20px;
}
#logo h1, #logo small {
    margin:0px;
    display:block;
    text-indent:-9999px;
}
#logo {
    background-image:url(images/logo.png);
    background-repeat:no-repeat;
    width:194px;
    height:83px;
}
ul#menu {
    margin:0px; 
    padding:0 0 0 25px;
    right:0px;
}
ul#menu li {
    display:inline;
    margin-right:20px;
}
ul#menu li a {
    text-decoration:none;
    color:#FFFFFF;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 700;
    font-size:16px;
    /*font-weight:bold;*/
    text-transform:uppercase;
}
ul#menu li p {
    margin: 0px;
}


/* 
    Content-Styles 
*/

.splash{
    width:1024px;
    height: 290px;
    background: url("images/ES_splash3.2.jpg") no-repeat 100% 100%;
    display:block;
    margin:0px;
    padding:0px;
}
.content{
    height: 363px;
    width: 1024 px;
    background-color: #FFFFFF;
    display:block;
}
.splash_content_top{
    height: 135px;
    width: 750px;
    /*background: blue;*/
}
.splash_content_bottom{
    height: 228px;
    width: 1024px;
}

#about{
    width: 135px;
    font-size:26px;
    font-weight:bold;
    color: #e87411;
    padding-top:25px;
    padding-left:25px;
    position:absolute;
}
#about_content{
    float:right;
    width: 575px;
    padding-top:25px;
}

#payroll{
    width:341px;
    min-height: 225px;
    float:left;
}
#hr{
    width:342px;
    min-height: 225px;
    float:left;
}
#staffing{
    width:341px;
    min-height: 225px;
    float:left;
}
#payroll_top{
    background-image: url('images/ES_content_icon_div1.png');
    width:70px;
    height:49px;
    margin-left:15px;
    position:absolute;
}
#hr_top{
    background-image: url('images/ES_content_icon_div2.png');
    width:72px;
    height:48px;
    margin-left:15px;
    position:absolute;
}
#staffing_top{
    background-image: url('images/ES_content_icon_div3.png');
    width:72px;
    height:53px;
    margin-left:15px;
    position:absolute;
}
#payroll_name{
    float: right;
    font-size:24px;
    font-weight:bold;
    margin-right:165px;
    margin-top:18px;
    margin-bottom:15px;
}
#hr_name{
    float: right;
    font-size:24px;
    font-weight:bold;
    margin-right:37px;
    margin-top:18px;
    margin-bottom:15px;
}
#staffing_name{
    float: right;
    font-size:24px;
    font-weight:bold;
    margin-right:153px;
    margin-top:18px;
    margin-bottom:15px;
}
.div_ul{
    margin-left:12px;
    margin-top:60px;
}
.div_ul ul{
    list-style:none;
    margin:0 0 1em 25px;
    padding: 0;
}
.div_ul ul li{
    line-height:1.3em;
    margin: .25em 0;
    padding: 0 0 0 15px;
    background:url(images/ul_dot.png) no-repeat 0 3px;;
}


/* 
    Tag-Styles 
*/

.tagButton {
    border-top: 1px solid #d4d4d4;
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #d5d5d5 50%, #c9c9c9 51%, #c9c9c9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(50%,#d5d5d5), color-stop(51%,#c9c9c9), color-stop(100%,#c9c9c9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#d5d5d5 50%,#c9c9c9 51%,#c9c9c9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#d5d5d5 50%,#c9c9c9 51%,#c9c9c9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#d5d5d5 50%,#c9c9c9 51%,#c9c9c9 100%); /* IE10+ */
    background: linear-gradient(top, #eeeeee 0%,#d5d5d5 50%,#c9c9c9 51%,#c9c9c9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
    padding: 6px 12px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: #000000;
    font-size: 18px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-decoration: none;
    vertical-align: middle;
    text-align:center;
    width: 147px;
    cursor: pointer;
}

.tag{
    height: 424px;
    width: 291px;
    z-index: 100;
    background: url(images/ES_tag.png);
    position: absolute;
    top:-2px;
    left:750px;
}

#homepageTag{
    margin-left: 58px;
    margin-top: 358px;
    margin-bottom: 21px;
}

#saveForm{
    font-size: 13px;
    width: 100px;
}

/*
    Form
*/

#data{
    width: 500px;
    height: 600px;
    padding: 25px;
}

#data ul{
    list-style: none;
}
#data .error{
    color: red;
}

.form_input{
    width: 175px;
}

/* 
    Block-Styles 
*/
.block {
    border:1px solid #a3a09e;
    background-color:#ffffff;
    margin-bottom:20px;
    position:relative;
}

.image_block {
    height:290px;
    margin-top: 1px;

}
.image_block img {

    margin-left: auto;
    margin-right: auto;
}

#block_featured {
    height: 100px;
}

/*
    Footer-Styles
*/

#footer {
    background: #343434;
    width: 1024px;
    height: 57px;
    margin: 0 auto;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size:10px;
}

#footer .container{
    display: inline;
}

.footer_column {
    float:left;
    width:120px;
    margin-right:30px;
}
#footer .long {
    width:610px;
}
#footer h3 {
    color:#e2dddc;
    text-transform:uppercase;
    font-size:10px;
}


.footer_column ul li, .footer_column ul {
    list-style:none;
    margin:0px;
    padding:0px;
}

.social{
    float: left;
    height: 31px;
    width: 31px;
    margin-top:14px;
    margin-right: 15px;
    background:#838383;
    border-radius: 5px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 0px 1px 6px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}

#social1{
    margin-left: 25px;
}

.social_images{
    margin-left: 3px;
    margin-top: 4px;
}

#copyright{
    padding-top:20px;
    padding-left: 810px;
    font-size:13px;
}

.under_footer{
    width: 1024px;
    height: 238px;
    /*background: #656565;*/
    background: #656565; /* Old browsers */
    background: url(images/footer_gradient.png), -moz-linear-gradient(-45deg, #656565 0%, #797979 39%, #797979 54%, #656565 100%); /* FF3.6+ */
    background: url(images/footer_gradient.png), -webkit-gradient(linear, left top,   right bottom, color-stop(0%,#656565), color-stop(39%,#797979), color-stop(54%,#797979),   color-stop(100%,#656565)); /* Chrome,Safari4+ */
    background: url(images/footer_gradient.png), -webkit-linear-gradient(-45deg, #656565 0%,#797979 39%,#797979 54%,#656565 100%); /* Chrome10+,Safari5.1+ */
    background: url(images/footer_gradient.png), -o-linear-gradient(-45deg, #656565 0%,#797979 39%,#797979 54%,#656565 100%); /* Opera 11.10+ */
    background: url(images/footer_gradient.png), -ms-linear-gradient(-45deg, #656565 0%,#797979 39%,#797979 54%,#656565 100%); /* IE10+ */
    background: url(images/footer_gradient.png), linear-gradient(-45deg, #656565 0%,#797979 39%,#797979 54%,#656565 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565',  endColorstr='#656565',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    margin-top: 12px;
}



/*
    Clear
*/

.clear {
    clear: both;
}

Here is the HTML:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<link href="main.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="js/fancybox/jquery.fancybox-1.3.4.css"    type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->
<!--<script type="text/javascript" src="js/additional-methods.min.js"></script>-->
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.js"></script>
</head>

<body>
<div id="main">

    <div class="container">

        <div id="header">

            <ul id="menu">
                <li><a>Payroll</a></li>
                <li><a>Benefits</a></li>
                <li><a>Accounting</a></li>
                <li><a>Human Resources</a></li>
                <li><a>Risk Management</a></li>
                <li><a>Staffing</a></li>
            </ul>

            <div class="tag">
                <a id="inline" href="#data"><input id="homepageTag" class="tagButton" value="Email Us"/></a>
            </div>



        </div>

        <div class="splash"></div>
        <div class="content">
            <div class="splash_content_top">
                <div id="about">
                    About Us
                </div>
                <div class="clear"></div>
                <div id="about_content">
                    From finding you the right employees to processing paychecks, Employ Source is your<br>
                    professional employment partner.  We handle payroll, benefits, accounting, HR, risk<br>
                    management and staffing support for small to medium sized businesses.  It's our personal<br> 
                    dedication to one-on-one customer support that makes Employ Source the right choice for all<br> 
                    your employment solutions.
                </div>
            </div>
            <div class="clear"></div>
            <div class="splash_content_bottom">
                <div id="payroll">
                    <div id="payroll_top"></div>
                    <div id="payroll_name">Payroll</div>
                    <div class="div_ul">
                        <ul>
                            <li>Dedicated payroll representatives</li>
                            <li>Certified payroll processing</li>
                            <li>Detailed management reports</li>
                            <li>State and federal deposits and filings</li>
                        </ul>
                    </div>
                </div>
                <div id="hr">
                    <div id="hr_top"></div>
                    <div id="hr_name">Human Resources</div>
                    <div class="div_ul">
                        <ul>
                            <li>Customized employee handbooks</li>
                            <li>Pre-employment screenings</li>
                            <li>New hire processing</li>
                            <li>Employment law compliance and training</li>
                        </ul>
                    </div>
                </div>
                <div id="staffing">
                    <div id="staffing_top"></div>
                    <div id="staffing_name">Staffing</div>
                    <div class="div_ul" id="rightside">
                        <ul>
                            <li>Job placements for employees and employers</li>
                            <li>Temp, temp-to-hire and permanent placements</li>
                            <li>Resume assistance for employees seeking work</li>
                            <li>Joint management options for employers</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class='image_block'>
            <img src="images/ES_splash2.jpg"/>
        </div>
        <div class='image_block'>
            <img src="images/ES_content.jpg"/>
        </div>-->



    </div>

</div>

<div id="footer">
    <div class="container">
        <div id="social1" class="social"><img class="social_images" src="images/linkdin.png"/></div>
        <div class="social"><img class="social_images" src="images/facebook.png"/></div>
        <div class="social"><img class="social_images" src="images/twitter.png"/></div>    
    </div>
    <div id="copyright">
    &#169; Copyright 
    </div>
    <div class="clear"></div>
    <div class="under_footer">

    </div>
</div>
<div style="display:none">
    <div id="data">

        <form id="es_contact_form" method="post" action="" onSubmit="return validateCaptcha()">
        <div class="form_description">
            <h2>Contact </h2>
            <p>Thank you for contacting Employ Source!</p>
        </div>                      
        <ul >

            <li id="li_1" >
                <label class="description" for="name">Name </label>
                <div class="form_input">
                    <input id="name" name="name" class="removeval" type="text" maxlength="255" value=""/> 
                </div> 
            </li>       
            <li id="li_2" >
                <label class="description" for="phone">Phone </label>
                    <div class="form_input">
                        <input id="phone" name="phone" class="removeval" type="text" maxlength="255" value=""/> 
                    </div> 
            </li>       
            <li id="li_3" >
                <label class="description" for="email">Email </label>
                    <div class="form_input">
                        <input id="email" name="email" class="removeval" type="text" maxlength="255" value=""/> 
                    </div> 
            </li>       
            <li id="li_4" >
                <label class="description" for="remail">Re-enter Email </label>
                    <div class="form_input">
                        <input id="remail" name="remail" class="removeval" type="text" maxlength="255" value=""/> 
                    </div> 
            </li>       
            <li id="li_5" >
                <label class="description" for="comments">Comments/Questions </label>
                    <div class="form_input">
                        <textarea id="comments" name="comments" class="removeval"></textarea> 
                    </div> 
            </li>
            <li>
                <label class="description" for="comments">&nbsp;</label>
            <script type="text/javascript"
               src="http://www.google.com/recaptcha/api/challenge?k=">
            </script>
            <noscript>
               <iframe src="http://www.google.com/recaptcha/api/noscript?k="
                   height="300" width="500" frameborder="0"></iframe><br>
               <textarea name="recaptcha_challenge_field" rows="3" cols="40">
               </textarea>
               <input type="hidden" name="recaptcha_response_field"
                   value="manual_challenge">
            </noscript>
            <p style="color: red;" id="captchaStatus">&nbsp;</p>



            </li>

            <li class="buttons">
                <input type="hidden" name="form_id" value="408860" />

                <input id="saveForm" class="tagButton" type="submit" name="submit" value="Submit" />
            </li>

        </ul>
    </form>

    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
    }, "Please specify a valid phone number");

    var validator = $("#es_contact_form").validate({
        rules: {
            name: "required",
            phone: {required:true, phoneUS:true},
            email: {required:true, email:true},
            remail: {required: true, email: true, equalTo:'#email'},
            comments: "required"
        },
        messages: {
            name: " Required field, please enter!",
            phone: {required:' Required field, please enter!', phoneUS:' Please enter a valid phone number'},
            email:{required:' Required field, please enter!', email:' Not a valid email address, please re-enter!'},
            remail:{required:' Required field, please enter!', email:' Not a valid email address, please re-enter!', equalTo:"Please enter the same email address!"},
            comments: " Required field, please enter!"
        }
    });
    $("a#inline").fancybox({
        onClosed: function(){
            validator.resetForm();
            $("#captchaStatus").html("&nbsp;");
            $('.removeval').val('').removeClass('error');
        }
    });
});
function validateCaptcha(){
        challengeField = $("input#recaptcha_challenge_field").val();
        responseField = $("input#recaptcha_response_field").val();
        //alert(challengeField);
        //alert(responseField);
        //return false;
        var esform = $('#es_contact_form').serialize();
        var html = $.ajax({
        type: "POST",
        url: "scripts/ajax.recaptcha.php",
        data: esform,//"recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
        async: false
        }).responseText;

        if(html == "success")
        {
            alert('Thank you for contacting Employ Source!');
            return true;
        }
        else
        {
            $("#captchaStatus").html("Your captcha is incorrect. Please try again");
            Recaptcha.reload();
            return false;
        }
    }
</script>

</body>
</html>    

Here is the DOCTYPE I am using:

<!doctype html>

Again, this will render in FF, Chrome, and Safari with no problem. When I try and view it in IE 9 it doesn't show up, but when I view it in quirks mode, it does.

I'm sure it's something I'm overlooking, but I have been staring at this problem for the past couple of hours to no avail.

Any help would be appreciated.

回答1:

Try using svg instead of filter for IE9. I use this handy tool colorzilla.com/gradient-editor make sure to tick the box that says IE9 Support

回答2:

I saw a problem like this here few days ago : Banner isn't showing up in IE7 and IE8

What I suggest is to save the file in PNG instead. If it PNG already, try JPEG. Just so you see if the picture itself is the problem.

来源：https://stackoverflow.com/questions/10556731/css-background-image-not-loading-in-ie9