Question

有点奇怪，我试图在图像上叠加几个链接，并且只在IE（所有版本）中显示它们在图像后面。适用于Chrome，Firefox等。

我尝试给每个元素一个合适的z-index，但它实际上没有任何区别。

我发誓我之前已经做了一百万次问题。

这是一个JSFiddle： http://jsfiddle.net/SY8xp/

<a href="#" class="logo-link-a"><span>Link 1</span></a>
<a href="#" class="logo-link-b"><span>Link 2</span></a>
<img src="http://lorempixel.com/212/43" width="212" height="43" alt="" id="logo" />

.logo-link-a span, .logo-link-b span {
    display: none;
}

.logo-link-a {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    margin: 25px 0px 0px 0px;
}

.logo-link-b {
    display: block;
    position: absolute;
    width: 165px;
    height: 50px;
    margin: 25px 0px 0px 50px;
}

#logo {
    margin-top: 30px;
}

Answer 1

一个hackish解决方案是为<a />元素添加背景颜色。将此添加到您的jsfiddle的CSS中：

.logo-link-a, logo-link-b {
    background-color: rgba(255,255,255,0);
}

Answer 2

在图片上隐藏链接的原因是什么？你可以用<a>标签包装图像并创建没有太多标记的链接，你也可以使用图像替换为页面的SEO带来好的结果

这里有一些图像替换技巧：http://css-tricks.com/css-image-replacement/

这里有一个小提琴：http://jsfiddle.net/9V5g8/1/

HTML：

<!-- option 1 -->
<a href="http://www.starbucks.com/"><img src="http://www.starbucks.com/static/images/global/logo.png" alt=""></a>

    <!-- option 2 -->
<div class="logo">
    <a href="http://www.starbucks.com/">
    <h1 class="img-replace">
      My Logo
    </h1>
    </a>
</div>

CSS：

h1.img-replace {
  width: 85px; 
  height: 84px;
  background: url("http://www.starbucks.com/static/images/global/logo.png") no-repeat 0% 50%;
  text-indent: -9999px;
}

在IE10中定位绝对和z-index

2 个答案: