Anchor with span don't apply :active effect on IE

问题

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>

回答1:

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

The drawback is that you can't select any text inside the a-element.

Pseudo-elements are supported by IE8+. A workaround for IE7 would require CSS-Expressions, but as you don't want to use Javascript …

回答2:

Try this code on your CSS

    ul.active_a li a:link    { color: red;}

this code may help you.. http://jsfiddle.net/easwee/WVrzu/16/

I tested it IE. its working perfectly.

Good Luck !

来源：https://stackoverflow.com/questions/14317758/anchor-with-span-dont-apply-active-effect-on-ie

标签

html

css

internet-explorer

cross-browser