IE8 - 单击链接内的 div 时没有任何反应

Question

在 imgcontainer div 外部单击时，链接可以正常工作，但是当我单击图像时它没有反应，在 IE10 上它可以工作，在 Google chrome 上它可以工作，但在 IE8 上它没有。

请在下面找到我的 CSS 代码：

.imgcontainer {
  margin: 0 auto;
  width: 75px;
  height: 27px;
}

.imgcontainer img {
  max-width: 75px;
  height: 27px;
}

a {
  display: block;
  height:55px;
  width: 100px;
  margin-top:5px;
  margin-left:10px;
  padding-top:15px;
  text-align: center;
  background-color: #eeeeee;
  border-radius: 5px;
  font-size: 10px;
  font-family: verdana;
  font-weight: bold;
  text-decoration: none;
  color: black;
  border: solid 1px #606060;
  cursor: pointer;
}

在我的html下面：

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

有人可以帮忙吗？

Answer 1

在 HTML 5 之前，不允许将块元素放入内联元素中。

在早期的浏览器中，div 元素不会在 a 元素中结束。浏览器会在遇到div元素时结束a元素，所以图片容器会在链接之外结束。

使用像span 这样的内联元素而不是div：

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

然后设置span 的样式以呈现为块元素（这没关系，因为您对a 元素执行相同操作）：

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

此外，ul 和 li 元素似乎使用不正确。 li 元素应该在 ul 元素内。如果您在另一个列表中有一个列表（这可以解释为什么在一个 li 元素中有一个 ul 元素），那么内部列表也必须有 li 元素。