Question

我有一个图像缩略图，文字位于图像的右侧。我在图像上有一个超链接，弹出全尺寸图像。

现在超链接仅适用于图像的下半部分（在文本内嵌到图像的下方）。

奇怪的是，它似乎在jsfiddle上工作正常，但不在网站上。

有什么可能导致这个问题吗？下面的JSFIDDLE就是它在网站上的样子。

CSS：

    .content {
        width: 500px;
        padding: 10px;
        overflow: hidden;
    }
    .content img, .content h3 {
        float: left;
        border-style:solid;
        border-width:5px;
    }
    .content img {
        padding-right: 10px;
    }
    .content p {
        padding: 40px 0 0 20px;
    }

HTML：

    <div class="content"> <a id="image1" href="images/site_images/acorn-award.jpg" title="image title.">
            <img src="images/site_images/thumb.jpg" alt="" width="200" height="120" />
        </a>

    <p>This is some text explaining the image</p>
</div>

Answer 1

页面上的某些内容覆盖了部分链接。您可以通过右键单击不起作用的部件并在您使用的任何浏览器中选择“检查元素”或其等效物来找出它是什么。

Answer 2

我认为以下声明没有任何理由：

.content img, .content h3 {
    float: left;
}

随机（至少在img元素上的小提琴中没有任何意义）浮动元素几乎总是会导致问题。在您的情况下，图像大小很可能不适合包含元素，从而导致溢出和重叠问题。移除浮子（将其移动到包含的锚）或至少清除它。

HTML / CSS - 图像链接仅适用于图像的一半

2 个答案: