Question

我正在使用图片制作自定义按钮，然后使用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;
}

Answer 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;
}

Answer 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并浓缩了。现在，看看如何使用不同的CSS for Internet Explorer来使文本对齐。感谢user3687283帮助清理代码。

：活动被IE忽略

2 个答案: