CSS sprite button in IE8 doesn't show/work?_问答_开发者

CSS sprite button in IE8 doesn't show/work?

开发者 https://www.devze.com 2023-03-03 11:51 出处：网络

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.

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).