当在 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>
有人可以帮忙吗?
最佳答案
直到 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
元素。
关于html - IE8 - 单击链接内的 div 时没有任何反应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27169762/