IE9中未加载CSS背景图片 [英] CSS background image not loading in IE9
本文介绍了IE9中未加载CSS背景图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个要在IE9中加载的图像.我可以在怪异模式下加载图像，但不能在标准模式下加载图像.在Firefox和Chrome中都可以正常显示.
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.
这是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;
}
这是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">
© 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"> </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"> </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(" ");
$('.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>
这是我正在使用的DOCTYPE:
Here is the DOCTYPE I am using:
<!doctype html>
同样，这将在FF，Chrome和Safari中呈现，没有问题.当我尝试在IE 9中查看它时，它没有显示，但是当我在怪癖"模式中查看时，它显示了.
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.
任何帮助将不胜感激.
推荐答案
尝试对IE9使用svg而不是过滤器.我使用了这个方便的工具 colorzilla.com/gradient-editor 确保选中显示IE9支持的框
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
这篇关于IE9中未加载CSS背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
