IE上的css按钮答案

【问题标题】：css button on IEIE上的css按钮
【发布时间】：2012-10-20 01:44:57
【问题描述】：

我想用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=""/>

【问题讨论】：

请发布您正在使用的 CSS 代码，如果您愿意，我很乐意为您提供帮助。
“虚线”可能是一个非常重要的辅助功能。如果可能的话，你不应该担心这个。
我用 css 代码更新了帖子。谢谢！

标签： html css internet-explorer firefox browser

【解决方案1】：

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

如果你使用的是 ie7 >

你需要在你的锚点上添加 href，否则 :hover 不会被 IE 拾取：

要删除轮廓，您可以尝试

a {
   outline: 0;
}

【讨论】：

我在 css 中有更多带有 :hover 的对象，它们工作得很好，这是唯一的问题。也许是因为它的 type="submit"？
@NullPointer 有点困惑。您的解决方案将代码称为锚标记，但它是输入按钮。从发布的代码来看，除非我遗漏了什么，否则似乎没有锚标记。
@asafregev 尝试类似input[type="submit"] 来选择提交按钮
知道了。这更有意义。谢谢。我很抱歉造成混乱。
@War10ck 不要道歉...哥们没关系...我没问题... :)

【解决方案2】：

我认为这是由 IE 中的 outline 属性引起的。

查看http://css-tricks.com/removing-the-dotted-outline/，了解有关如何删除它的一些提示。

a {
   outline: 0;
}

或将outline 样式应用于其他元素。

【讨论】：

OP 应尽可能保留大纲，因为它是一项重要的辅助功能。
@KevinBoucher 是的，我同意。但是我们都知道客户是什么样的；）总是想要他们不应该拥有的这个：P
我试过这个，它没有改变它。实际上，当我加载我的页面时，会出现这个虚线轮廓，当我点击按钮时，它看起来像没有发生任何事情。没有任何变化，没有按钮的图像。或者不是虚线轮廓