<a> over <img> IE10 不工作答案

【问题标题】：<a> over <img> not working IE10<a> over <img> IE10 不工作
【发布时间】：2023-03-16 17:53:03
【问题描述】：

HTML

<div class="cont" id="cont">
   <img class="c1" id="c1" src="..."></img>
</div>
<div class="men" id="men">
   <a href="..."></a>
</div>

CSS

.cont {
   float: left;
   display: inline-flex;
}

.c1 {
   position: absolute;
   right: 0;
}

.men {
   position: absolute;
   top: 10px;
   width: 385px;
   height: 50px;
   right: 80px;
}

.men > a {
   position: absolute;
   left: 0;
   width: 290px;
   height: inherit;
}

使用引导程序 3。

问题

使用IE 11，一切都很好，图像被放置在屏幕的右上角（还有c2等来解释.cont的flot left，但与问题无关）并且.men div被放置在所需位置的图像顶部。但是，在 IE 10 中，它位于图像的后面。 z-index 也无法完成这项工作。

【问题讨论】：

你能用<map>元素代替吗？

标签： html css internet-explorer-11 internet-explorer-10

【解决方案1】：

不要在图像上浮动/定位链接，而是使用<map> 元素...

<map name="imgmap">
   <area shape="rect" coords="385,10,465,60" href="..." alt="..." />
</map>
<img class="c1" id="c1" usemap="#imgmap" src="..." />

有关如何正确设置coords 的详细信息，请参阅<area> 标签。

【讨论】：

【解决方案2】：

正如其他人 (freefaller) 所说，使用图像映射。但是：虽然使用图像地图是一种更好的方法，但它仍然有明显的缺点，例如地图不随图像缩放（例如缩放到移动设备纵向/横向）。

因此，请改用 SVG images 和内置的、可扩展的图像映射系统。 SVG 图像 - 总而言之 - 使用文本规则创建的图像非常类似于 CSS 样式表，并且可以将地图可点击链接元素合并到 SVG 图像中。

一个简单的示例，它将在图像中生成一个可点击链接的方形框。 在 HTML <img> 元素上使用 CSS 规则然后可以缩放，并且 SVG 上的锚点将按比例缩放：

HTML（内含 SVG）

<figure id="burj">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" preserveAspectRatio="xMinYMin meet" >
    <image width="1200" height="808" xlink:href="burj-khalifa.jpg">
    </image>
    <a xlink:href="//burjkhalifa.ae/en/">
        <rect x="535" y="28" fill="#fff" opacity="0" width="150" height="750" />
        </a>
    </svg>
</figure>

CSS

figure {
    width:100%;
    max-width:808px;
}

figure svg {
    width:100%;
    height:auto;
}

对深入探索非常有用的参考资料：

附言我过去曾使用 javascript/jQuery 函数来“缩放”标准 <map> 元素，但注意到这些响应速度很慢，并且似乎在某种程度上“阻塞”了页面加载和刷新时间，所以出现（粗略一瞥) 是相当低效/处理器繁重的功能，我相信因为他们不断检查 DOM 是否以及何时因任何原因被重新调整。

【讨论】：

【解决方案3】：

在你的html页面中添加<!DOCTYPE html> 尝试使用 img:hover {enter code here}

【讨论】：

文档类型存在。 img:hover 无关紧要，因为我希望链接位于图像的特定部分，而不是整体。
@freefaller 提到的图像使用地图的特定部分