html - 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 才允许将 block 元素放入内联元素中。

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

使用 span 之类的内联元素代替 div:

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

然后设置 span 的样式以呈现为 block 元素(这与对 a 元素执行相同的操作一样):

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

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