带跨度的锚点不适用：在IE上的主动效果 [英] Anchor with span don't apply :active effect on IE
本文介绍了带跨度的锚点不适用：在IE上的主动效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有些想法，在IE上正确渲染这个？
：如果我单击超出范围区域，活动只有。
我想这样做而不使用javascript。
在chrome和firefox它运行完美。
Some idea to render this correctly on IE???? The :active only goes if I click out of span area. I would like to do this without to use javascript. On chrome and firefox it runs perfectly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
a
{
padding:20px;
border:1px;
display:block;
}
a span
{
width:96px;
height:96px;
display:block;
border:1px solid;
}
a:hover
{
background-color:#ccc;
}
a:active
{
background-color:#666;
}
</style>
</head>
<body>
<a href="#">
<span>casa</span>
</a>
</body>
</html>
推荐答案
位于其顶部的a-element：
You can fix this using a pseudo-element for the a-element which is positioned right on top of it:
a {
position: relative;
}
a:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
缺点是你不能在a-element 。
The drawback is that you can't select any text inside the a-element.
IE8 +支持伪元素。 IE7的解决方法将需要CSS表达式，但因为你不想使用Javascript ...
Pseudo-elements are supported by IE8+. A workaround for IE7 would require CSS-Expressions, but as you don't want to use Javascript …
这篇关于带跨度的锚点不适用：在IE上的主动效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
