Question

如果没有CSS，当我点击该链接时，会将我带到YouTube页面（就像它应该的那样）。但是，当我添加CSS时，它不会。

我怎么能解决这个问题，以便我可以使用CSS链接？（注意：我使用的是谷歌浏览器）

.button {
    display:block;
    width:250px;
    height:175px;
    position:fixed;
    top:53%;
    left:32.5%;
}

<div class="button">
    <a href="http://fpoimg.com/">
        <img src="http://fpoimg.com/300x250" alt="YouTube">
    </a>
</div>

编辑：我不相信它甚至会注册我的鼠标在图像上，因为悬停和活动的CSS标签不起作用。这会导致这个问题吗？

Answer 1

由于此错误，YouTube拒绝将当前标签重定向至youtube.com：

Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

要避免这种情况，只需将target="_blank"添加到您的<a>代码。

<a href="https://www.youtube.com" target="_blank">

其中target="_blank"为您打开一个新标签，其中包含网址https://www.youtube.com，而不是替换您当前的标签。

希望有所帮助 fiddle example

Answer 2

我认为它违反了混合内容安全政策。

根据控制台中的错误消息...

Chrome： Mixed Content: The page at 'https://stackoverflow.com/questions/45990704/html-link-on-image-stops-working-when-css-is-added-how-can-i-fix-this' was loaded over HTTPS, but requested an insecure image 'http://fpoimg.com/300x250'. This content should also be served over HTTPS.

Firefox： Blocked loading mixed active content "http://fpoimg.com/"

Reference

混合被动/显示内容是通过HTTP提供的内容，该内容包含在HTTPS网页中，但不能改变网页的其他部分。例如，攻击者可以将通过HTTP提供的图像替换为不适当的图像或消息给用户。攻击者还可以通过观察向用户提供哪些图像来推断关于用户活动的信息;通常，图像仅在网站的特定页面上提供。如果攻击者观察到对某些图像的HTTP请求，他们可以确定用户正在访问哪个网页。

正如您所看到的，css实际上没有阻止此功能。

＆＃13;

<div class="button">
    <a href="http://fpoimg.com/">
        <img src="http://fpoimg.com/300x250">
    </a>
</div>

＆＃13;

Answer 3

您不需要使用标签。只需将您的带标签包围，并根据需要设计您的链接，如果需要：）

Answer 4

问题原因是它上面的元素的高度覆盖了图像，因此该元素的高度阻止了图像被点击或激活了图像的悬停选择器。

添加CSS时，图像上的HTML链接停止工作，我该如何解决这个问题？

4 个答案: