Question

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;
}

Bootstrap 3 is used.

Problem

Using IE 11, everything is fine, the image is placed at the top right of the screen (theres also c2 and such to explain the flot left of .cont, but irrelevent for the problem) and the .men div is placed on top of the image at the desired location. However, in IE 10 it is placed behind the image. z-index also fails to do the job.

Answer 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>标记。

Answer 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; }

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

http://www.creativebloq.com/netmag/create-responsive-svg-image-maps-51411831

http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG

<强> P.S 我过去使用javascript / jQuery函数来“扩展”标准<map>元素，但是注意到它们响应很慢，并且似乎“阻塞”页面加载和刷新时间，所以出现（在粗略一瞥）是非常低效/处理器繁重的功能，我相信，因为他们会不断检查DOM是否以及何时因任何原因被重新调整。

Answer 3

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

<a> over <img/> not working IE10

HTML

CSS

Problem

3 个答案: