CSS sprite button in IE8 doesn't show/work?
I am having an issue with ie8 and a simple form submit button. I use an image as a button with a bit of CSS so it has a nice hover effect. But it doesn't work/show up in IE8.
btnSubmit.png
has the default and hover state.
this is my code
<input name="form_submit" id="form_submit"
class="btns btnFormsubmit" type="submit" />
and CSS
.btns {
background-color:transparent;
background-position:left bottom;
background-repeat:no-repeat;
border:0 none;
display:block;
height:31px;
text-indent:-3999em;
}
.btns:hover {
background-position:left top;
cursor:pointer;
}
.btnFormsubmit {
background-image:url(imgs/btnSubimt.png);
height: 31px;
width:267px !important;
}
I also tried to add href="#"
<input href="#" name="form_submit" id="form_submit"
class="btns btnFormsubmit" 开发者_如何学Ctype="submit" />
IE8 does not support input:hover css selector in quirks mode. Try adding a doctype declaration (like for instance <!DOCTYPE html>
) and it should be OK.
Inputs are hard to style consistently across different browsers. I would recommend using a <button type="submit"></button>
if you can't get it to work (if the doctype is not the issue as suggested before).
精彩评论