您好，我有一个网站here!我有一个带有提交按钮的搜索框，该按钮有一个小放大镜的背景图像。背景图像在 chrome 和 firefox 中有效，但在 IE9 中似乎无效。我怎样才能解决这个问题？谢谢!!
HTML:
<!doctype html>
<head>
<title>The Totem Pole News</title>
<meta name="description" content=" A totem pole themed news website posting articles on music, movies, video games, mobile applications, and news.">
<link href="thecss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="socialmediaplugins">
<div id="facebook"><div class="fb-like" data-href="http://www.thetotempole.ca" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></div>
<div id="twitter"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div>
<g:plusone></g:plusone>
</div>
<div id="container">
<div id="contentbox" align="Center">
<div id="banner" align="Center">
</div>
<div id="navbar">
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 3</a>
</div>
<div id="navbar2">
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 3</a>
</div>
<!-- Atomz HTML for Search -->
<div id="searchbar">
<form method="get" action="http://search.atomz.com/search/">
<input type="hidden" name="sp_a" value="sp1005092e">
<input size="10" name="sp_q">
<input class="css_btn_class" type="submit" value="">
<input type="hidden" name="sp_p" value="all">
<input type="hidden" name="sp_f" value="UTF-8">
</form>
</div>
<div id="testtext">
<p> Helloooo</p>
</div>
<!-- This is the end of the contentbox -->
</div>
<!-- This is the end of the container div -->
</div>
</body>
</html>
CSS:
body {
margin-bottom:0px;
background-color:#333;
}
#container {
width: 1100px;
height:1000px;
position:relative;
margin-right: auto;
margin-left: auto;
z-index:1;
}
#facebook {
position:fixed;
right:100px;
z-index:15;
}
#twitter {
position:fixed;
z-index:16;
right:120px;
}
#google {
position:fixed;
top:7px;
right: 135px;
}
#socialmediaplugins {
text-align: right;
position: fixed;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
margin: 0px;
top: 0px;
left: 0px;
right: 0px;
z-index:14;
}
#contentbox {
background-color:#f6f301;
width: 1100px;
height: 1000px;
box-shadow:2px 2px 10px 10px #060606;
-webkit-box-shadow:2px 2px 10px 10px #060606;
-moz-box-shadow:2px 2px 10px 10px #060606;
/* For IE<9 */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=315,strength=2);
}
#banner {
background-image:url(images/totempolebanner.gif);
position:absolute;
top:25px;
width:768px;
height:120px;
left:166px;
}
#navbar {
float:left;
position:absolute;
top: 175px;
left:70px;
}
#navbar2 {
position: absolute;
top:175px;
left: 815px;
}
#searchbar {
position: absolute;
top: 23px;
left: 945px;
}
#testtext {
position: absolute;
left: 263px;
top: 327px;
}
.css_btn_class {
font-size:9px;
position: relative;
top:3px;
right:4px;
width:25px;
height:25px;
font-family:Verdana;
font-weight:normal;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #35d914;
padding:7px 24px;
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff9d00), color-stop(100%, #ffe711) );
background:-moz-linear-gradient( center top, #ff9d00 5%, #ffe711 100% );
background:-ms-linear-gradient( top, #ff9d00 5%, #ffe711 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9d00', endColorstr='#ffe711');
background-color:#ff9d00;
color:#ff0000;
display:inline-block;
text-shadow:0px 0px 1px #117cff;
-webkit-box-shadow: 0px 0px 0px 0px #117cff;
-moz-box-shadow: 0px 0px 0px 0px #117cff;
box-shadow: 0px 0px 0px 0px #117cff;
background-image: url(images/unnamed.gif);
background-repeat:no-repeat;
background-position:center;
}.css_btn_class:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffe711), color-stop(100%, #ff9d00) );
background:-moz-linear-gradient( center top, #ffe711 5%, #ff9d00 100% );
background:-ms-linear-gradient( top, #ffe711 5%, #ff9d00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe711', endColorstr='#ff9d00');
background-color:#ffe711;
background-image: url(images/unnamed.gif);
background-repeat:no-repeat;
background-position:center;
}.css_btn_class:active {
position:relative;
top:1px;
background-image: url(images/unnamed.gif);
background-repeat:no-repeat;
background-position:center;
}
/* This css button was generated by css-button-generator.com */
最佳答案
删除
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9d00', endColorstr='#ffe711')
它会覆盖背景图像。要么同意在 IE9 中没有背景渐变，要么将其作为背景图像的一部分。
关于javascript - CSS 按钮背景图像在 IE9 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19666918/