单击内部的 img 时出现 Chrome 问题答案

【问题标题】：Chrome issue when clicking on img inside a单击内部的 img 时出现 Chrome 问题
【发布时间】：2015-03-23 16:36:59
【问题描述】：

我有一个三年前的网站，它一直运行良好，直到现在。新版 Google Chrome 浏览器 v.41 遇到一个奇怪的错误：我在 A 标签内有一个 IMG 标签，当我点击它时，图像随机改变位置而不是转到链接所在的位置链接。这只发生在最新的 Chrome v.41 中。旧版本的 Google Chrome 和其他浏览器不会遇到此问题。我在 Windows 7 和 OSX 10.10 上都试过这个

我将code 复制到 jsfiddle 以防您想查看它。我没有使用过任何过时的 CSS 函数，也没有使用任何 JavaScript。

链接图片的代码：

<a class="insImg" href="#">
    <img class="imapa-foto" src="http://www.dolejsialej.cz/photo/thumbs/RD2-mars.jpg" />
    Dům 1
</a>

我只是想知道是不是有什么问题，或者只是这个版本的谷歌浏览器。

【问题讨论】：

标签： html google-chrome

【解决方案1】：

正如您所提到的，这似乎是 Chrome 的一个错误。

我已经使用了一些代码，这部分似乎是问题的一部分：

ul li img {
    width: 150px;
    position: absolute;
    top: 0;
    left: 0;
}

我不明白为什么单击锚会导致此定位被丢弃，但作为一种快速解决方法，您可以像这样将定位移动到锚中：

ul li a {
    text-decoration: none;
    -moz-opacity: 1;
    opacity: 1;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
ul li img {
    width: 150px;
}

请参阅下面的更新小提琴。

https://jsfiddle.net/2d4b1mLm/5/

【讨论】：

简单地制作a元素display:block似乎也解决了这个问题，jsfiddle.net/2d4b1mLm/6
似乎与此有关：stackoverflow.com/questions/23642290/… -- jsfiddle.net/2d4b1mLm/7 一旦失去焦点，元素就会跳转。
非常感谢您的解决方法，两者都有效；）仍然是一个奇怪的错误
@rlemon：这个解释似乎是有道理的，虽然好奇为什么 OP 现在只会看到这种行为出现......无论如何，找到了修复，所以一切都很好:-)