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元素内结束。浏览器在遇到a元素时将结束div元素，因此图像容器最终会在链接之外。

使用内联元素，例如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元素内。如果你有另一个列表（这可以解释为什么ul元素中有li元素），那么内部列表也必须有li个元素。

IE8 - 在链接中单击div时没有任何反应

1 个答案: