html - CSS 投影禁用链接

Question

我刚刚学习了关于如何在图像上制作投影效果的 CSS 教程。它真的很棒，除了我的图像实际上是一个链接(在菜单中)。问题是当投影效果被激活时，链接在 IE8 中不再有效。它在 Chrome 上运行良好，但由于它是一个内部网络应用程序，人们只使用 IE8。

我确定必须在我的 CSS 代码中的某处添加一个属性，但我不知道...

这是我的 CSS 代码:

.img-shadow {
  float:left;
  background: url(menupic/shadow.png) no-repeat bottom right;
  margin: 5px 0 0 5px;
  }

.img-shadow img {
  display: block;
  position: relative;
  margin: -6px 6px 6px -6px;
  padding: 4px;
  z-index: 10;
  }

这是我的 HTML 代码:

<a href="yyy.html"><span class='img-shadow' style='margin-left:3px;' ><img border=0 src="img.png" alt='menuitem' /></span></a>

谢谢!

P.S:请不要告诉我还有其他方法可以达到这种效果。我知道:)

Answer 1

如果看不到整个 HTML、CSS 和您正在使用的图像，我会说您正试图将图像放在 anchor 链接后面？现在使用 z-index: 10 你告诉它在正常元素之上并位于 anchor 链接之上并使其无法使用。尝试:

z-index:-10;