IE8 - 单击链接div中的图像时,链接不起作用

时间:2021-03-16 22:56:10

In other browsers this works, only in IE8 it does not from the ones I tried. In later Browser of internet explorer it works fine.

在其他浏览器中这是有效的,只在IE8中它不是我试过的那些。在后来的Internet Explorer浏览器中,它工作正常。

I have the following code:

我有以下代码:

CSS:

.imgcontainer {
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

.imgcontainer img {
  width: 75px;
  height: 30px;
}

HTML:

<ul>
  <li>
    <a href="http://somelink.com">
      <div class="imgcontainer">
        <img src="img/someimage.png">
      </div>
    </a>
  </li>
</ul>

What happens is the following: Anywhere around the image the link works, but as soon as I click on the image, the link does not respond. It is like the image is placed on top of the link.

会发生以下情况:链接工作的图像周围的任何地方,但只要我点击图像,链接就不会响应。就像图像放在链接的顶部。

Thanks in advance for your help

在此先感谢您的帮助

1 个解决方案

#1


0  

I've had the same issue recently and my solution was to bring the link inside the div and specify the width and height of it:

我最近遇到了同样的问题,我的解决方案是将链接带入div并指定它的宽度和高度:

.imgcontainer {
display: block;
position:relative;
margin: 0 auto;
width: 100px;
height: 100px;
}

.imgcontainer a{
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
}

.imgcontainer img {
width: 75px;
height: 30px;
}


<ul>
 <li>
    <div class="imgcontainer">
      <a href="http://somelink.com">
       <img src="img/someimage.png">
      </a>
     </div>
 </li>
</ul>

This may not be the best solution but it has worked for me.

这可能不是最好的解决方案,但它对我有用。

#1


0  

I've had the same issue recently and my solution was to bring the link inside the div and specify the width and height of it:

我最近遇到了同样的问题,我的解决方案是将链接带入div并指定它的宽度和高度:

.imgcontainer {
display: block;
position:relative;
margin: 0 auto;
width: 100px;
height: 100px;
}

.imgcontainer a{
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
}

.imgcontainer img {
width: 75px;
height: 30px;
}


<ul>
 <li>
    <div class="imgcontainer">
      <a href="http://somelink.com">
       <img src="img/someimage.png">
      </a>
     </div>
 </li>
</ul>

This may not be the best solution but it has worked for me.

这可能不是最好的解决方案,但它对我有用。