Question

我刚刚关注了如何在图像上制作投影效果的CSS教程。除了我的图像实际上是一个链接（在菜单中）之外，它的效果非常好。问题是，当激活阴影效果时，链接在IE8中不再起作用。它在Chrome上运行良好，但由于它是一个内部Web应用程序，人们只使用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和您正在使用的图像，我会说您试图将图像置于锚链接后面？现在使用z-index：10你告诉它高于正常元素并且坐在锚链接的顶部并使其无法使用。尝试：

z-index:-10;

Answer 2

而不是将跨度放入锚点，我做了相反的方式，它完美地运作。

以下是代码：

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

CSS Drop Shadow禁用链接

2 个答案: