0

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>
4

2 に答える 2

1

真上に配置された a 要素の疑似要素を使用して、これを修正できます。

a {
  position: relative;
}
a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

欠点は、a 要素内のテキストを選択できないことです。

疑似要素は IE8+ でサポートされています。IE7 の回避策には CSS 式が必要ですが、Javascript を使用したくない場合は…</p>

于 2013-01-14T11:52:37.787 に答える
0

このコードを CSS で試してください

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

このコードはあなたを助けるかもしれません.. http://jsfiddle.net/easwee/WVrzu/16/

IEでテストしました。完璧に機能しています。

幸運を ！

于 2013-01-14T11:58:20.703 に答える