在下面的 HTML 代码中，我试图在当前事件的 anchor 上实现颜色更改，这意味着一旦单击任何选项卡，它应该显示颜色(#ffd96b)作为其背景，它在 Chrome 上工作正常但在 IE 和 Mozilla 上不起作用.不明白为什么会这样，可能是我错过了什么，非常感谢任何帮助。
.tileMargin {
margin: 5%;
}
.deviceName {
width: 60%;
float: left;
padding: 5px;
border-radius: 5px 0px 0px 5px;
border: 1px solid #ccc;
background-color: #f2f2f2;
font-size: 0.75em;
}
.deviceCount {
width: 40%;
float: left;
background-color: #f2f2f2;
border-radius: 5px;
border: 1px solid #ccc;
text-align: center;
margin-left: -3px;
}
.deviceCount >div {
width: 33.33%;
float: left;
border-left: 1px solid #ccc;
}
.deviceCount input,
button {
width: 100%;
float: left;
padding: 3px 0px;
background-color: #f2f2f2;
border: none;
text-align: center;
appearance: button;
border-radius: 5px;
}
.devicesSmall a:hover div,
.devicesSmall a:hover input,
.devicesSmall a:hover button,
.devicesSmall a:active div,
.devicesSmall a:active input,
.devicesSmall a:active button,
.devicesSmall a:focus div,
.devicesSmall a:focus input,
.devicesSmall a:focus button {
background-color: #ffd96b !important;
}<!Doctype HTML>
<html lang="en">
<head>
<Title>asd sada asfa</Title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="tileMargin">
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<a href="#">
<div class="deviceName"><span>Mobile</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('mobile');">+</button>
</div>
<div>
<input id="mobile" type="text" value="1" disabled>
</div>
<div>
<button onclick="removeProduct('mobile');">-</button>
</div>
</div>
</a>
</div>
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
<a href="#">
<div class="deviceName"><span>Landline</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('landline');">+</button>
</div>
<div>
<input id="landline" type="text" value="1" disabled>
</div>
<div>
<button onclick="removeProduct('landline');">-</button>
</div>
</div>
</a>
</div>
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
<a href="#">
<div class="deviceName"><span>Internet</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('internet');">+</button>
</div>
<div>
<input id="internet" type="text" value="0" disabled>
</div>
<div>
<button onclick="removeProduct('internet');">-</button>
</div>
</div>
</a>
</div>
<div class="devicesSmall col-lg-3 col-md-3 col-sm-6 col-xs-6">
<a href="#">
<div class="deviceName"><span>IPTV</span>
</div>
<div class="deviceCount">
<div>
<button onclick="addProduct('Iptv');">+</button>
</div>
<div>
<input id="Iptv" type="text" value="1" disabled>
</div>
<div>
<button onclick="removeProduct('Iptv');">-</button>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</body>
</html>最佳答案
这并不是说它在 FF 或 IE 中不起作用，:active 在您单击该元素时应用并且不保留它。释放点击后样式将被删除。
此外，在您单击链接后，Chrome 会将焦点保持在链接上，而 FF 和 IE 则不会。这就是为什么 :focus 样式在您单击后会被删除的原因。
要使链接处于事件状态，请在 CSS 中添加类 active 并使用 JS 根据单击的链接添加/删除类。
关于html - :active and :focus on anchor is not working for IE and Mozilla，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40626089/