<a> 标签与 <div> 不匹配答案

【问题标题】：The <a> tag doesn't match the <div><a> 标签与 <div> 不匹配
【发布时间】：2015-09-28 01:33:50
【问题描述】：

我正在制作一个螺旋形的图片库，因此当您单击任何图片时，它会将您带到另一个页面。为此，我使用了以下代码：

HTML：

<div class="rotulacion-embarcaciones">
        <a href="rotulacion-embarcaciones.html">
            <img src="embarcaciones/embarcaciones1.jpg" class="rotulacion-embarcaciones">
        </a>
    </div>

CSS：

.rotulacion-embarcaciones {
border-radius: 50%;
width: 200px;
height: 200px;
position: absolute;
padding: 40px;
top: 100px;
left:35px;

}

但问题是我无法点击图片，因为<a> 标签有一些问题，请查看 chrome 检查器检测到的图片，以便更好地了解发生了什么：

http://i.stack.imgur.com/1FdbL.png

http://i.stack.imgur.com/8rtYY.png

http://i.stack.imgur.com/JHBcj.png

【问题讨论】：

如果你把类从你的图片移到你的a标签上怎么办？图像子级将继承该位置，尽管您需要一个新的图像边框半径类
@fixmycode 你是这个意思吗？：<a href="blablabla" class= "rotulacion-embarcaciones"
是的，然后只需在图像中添加另一个具有边框半径的类

标签： html css image css-position

【解决方案1】：

a 遇到的问题是其中的所有内容都是绝对定位的。带有position:absolute 的东西在正常的页面流中不会占用空间，这意味着a 会折叠到0×0 的大小。

解决方案：为a 中的图像使用另一个类，并在不使用position 的情况下为其设置样式。

【讨论】：