html - IE 上的 css 按钮

Question

我想用 type="submit" 制作一个登录按钮，该按钮的图像也有悬停图像和 :active 图像，它在 firefox 和 chrome 上运行良好，但在 internet explorer 上它只提供基本图像，不提供悬停图像和事件图像。除此之外，当您单击它时，它会在按钮上形成一条虚线。

它在IE上的显示方式:

http://imageshack.us/photo/my-images/72/ieproblem.jpg/

它在 chrome 和 firefox 上的显示方式:

http://imageshack.us/photo/my-images/685/chromes.jpg/

.button
 {
    border:none;
    background: url(../img/login.jpg);
    width:41px;height:19px;
   }
    .button:hover 
        {
        background: url(../img/loginhover.jpg)  no-repeat top left;
        width: 41px;
        height: 19px;
        }

 .button:active {

 background: url(../img/loginactive.jpg);
   }

HTML 上的按钮代码:

<input type="submit" class="button" value=""/>

Answer 1

如果您使用的是早期版本的 IE，则 :hover 会出现问题。

如果你使用的是ie7 >

您需要将 href 添加到您的 anchor ，否则 :hover 不会被 IE 拾取:

并删除您可以尝试的轮廓

a {
   outline: 0;
}