：IE被IE忽略[重复]答案

【问题标题】：:active being ignored by IE [duplicate]：IE被IE忽略[重复]
【发布时间】：2014-10-16 16:05:09
【问题描述】：

我正在使用图像制作自定义按钮，然后使用div 将数字对齐到我想要的位置。

此方法适用于除 IE 以外的所有浏览器。文本以按钮为中心，但它浮动到顶部。当我点击按钮时，它完全忽略了按钮的:active，所以所发生的只是.numKeypad:active 正在工作，但按钮没有。

要使其在 IE 中工作，需要进行哪些更改？这是我认为相关的代码部分：

HTML

<div id="btn1" class="btnKeypad" onclick="input(1);">
    <div id="num1" class="numKeypad">1</div> 
</div>

CSS

#btn1 {
    background-image: url(../images/btnUp.png);
    cursor:pointer;
    left:129px;
    top:63px;
}

#btn1:active {
    background-image: url(../images/btnDown.png);
    left:129px;
    top:63px;
}

.numKeypad {
    bottom:2px;
    font-size:20pt;
    position:relative;
    text-align:center;
    font-family: 'Old Standard TT', serif;
}

.numKeypad:active {
    bottom:0px;
    font-size:18pt;
    position:relative;
    text-align:center;
    font-family: 'Old Standard TT', serif;
}

【问题讨论】：

尝试在这里找到答案stackoverflow.com/questions/5594102/…

标签： html css internet-explorer

【解决方案1】：

这些主题可能会对您有所帮助：

How to make :active state work in IE?

:active css selector not working for IE8 and IE9

<a> with an inner <span> not triggering :active state in IE 8

http://msdn.microsoft.com/en-us/library/ie/cc848864%28v=vs.85%29.aspx

关于 CSS 的提示。这应该可以完成完全相同的工作，而无需额外的代码行。

#btn1 {
background-image: url(../images/btnUp.png);
cursor:pointer;
left:129px;
top:63px;
}

#btn1:active {
background-image: url(../images/btnDown.png);
}

.numKeypad {
bottom:2px;
font-size:20pt;
position:relative;
text-align:center;
font-family: 'Old Standard TT', serif;
}

.numKeypad:active {
bottom:0px;
font-size:18pt;
}

【讨论】：

谢谢，我知道我接下来要做什么了。
感谢您帮我清理了一点代码，忘记了我不需要任何其他东西，除非我正在更改某些内容。

【解决方案2】：

找到了最好的解决方案，不得不稍微改变一下。

新的 HTML

<div id="btn1" class="btnKeypad" onclick="input(1);">1</div>

新的 CSS

#btn1 {
    background-image: url(../images/btnUp.png);
    cursor:pointer;
    left:129px;
    top:63px;
}

#btn1:active {
    background-image: url(../images/btnDown.png);
}

.btnKeypad {
    font-family:'Old Standard TT', serif;
    vertical-align:middle;
    text-align:center;
    position:absolute;
    line-height:36px;
    font-size:20pt;
    z-index:100;
    height:36px;
    width:42px;  
}

.btnKeypad:active {  
    line-height:37px;
    font-size:18pt;
}

我仍然对仅在 IE 中的按钮顶部对齐文本存在问题，但该功能现在可以完全按照我的设计方式运行。我将所有内容都移到了一个 div 中并压缩了它。现在来看看如何为 Internet Explorer 使用不同的 CSS 来对齐文本。感谢 user3687283 帮助清理代码。

【讨论】：